反應單選按鈕按鈕檢查屬性不起作用

Question

我有一個類似於單選按鈕輸入部分的反應組件。 我將每個收音機輸入上的 check 屬性設置為 true 或 false 表達式，但是當我運行它時它最終不起作用。

知道為什么在選擇新項目時該項目沒有被點亮嗎？ 當我記錄表達式 (console.log) 時，我得到了正確的結果。

我的代碼如下所示：

class MyClass extends Component {
    constructor(props) {
        super(props);

        this.state = {
            currentItem: 1,
          }
    }

    updateCurrentItem = (event) => {
        let key = `${event.currentTarget.id}`;
        this.currentItem = key;
        console.log(!(1 % this.currentItem));
    }

    isOn(id) {
        return (!(id % this.currentItem));
    }

    render() {

        return (
            <div className="iconList">

                <input type="radio" id="one" name="picker" value="one" checked={this.isOn(1)}/>
                <label for="one"><button id={1} onClick={this.updateCurrentItem}>One</button></label>

                <input type="radio" id="two" name="picker" value="two" checked={this.isOn(2)}/>
                <label for="two"><button id={2} onClick={this.updateCurrentItem}>Two</button></label>

                <input type="radio" id="three" name="picker" value="three" checked={this.isOn(3)}/>
                <label for="three"><button id={3} onClick={this.updateCurrentItem}><Three</button></label>

                <input type="radio" id="four" name="picker" value="four" checked={this.isOn(4)}/>
                <label for="four"><button id={4} onClick={this.updateCurrentItem}>Four</button></label>
            </div>
            
            );
        }
}

export default MyClass;

任何幫助深表感謝。 謝謝！

Answer 1

你應該使用this.state和this.setState 。 這是一個工作示例： https : //codesandbox.io/s/sleepy-dew-thglz?file=/src/App.js