Question

我在试图在React中切换复选框时遇到了令人沮丧的问题。

当我选中框时，状态更新，状态，上一个状态，并在我true时检查显示console.log，这本身就很奇怪。但是复选框不会检查。

国家

    this.state = {
        type: {
            prop1: false,
            prop2: false
        }
    }

处理事件更改

handleCheckbox(e) {
    const name = e.target.name;
    const checked = e.target.checked;
    this.setState((prevState) => {
        this.state.type[name] = !prevState.type[name];
    });
}

复选框

<input
   type="checkbox"
   name="prop1"
   id="string"
   className="modal__checkbox-input"
   checked={this.state.type.prop1}
   onChange={this.handleCheckbox}
/>

Answer 1

更新您的handleCheckbox 旧州你会发现这个.state

handleCheckbox(e) {
    const name = e.target.name;
    const checked = e.target.checked;
    const d = this.state.type;
    d[name] = !d[name];
    this.setState({ type : d });
}

Answer 2

从您的函数setState，您需要返回要更新的状态而不是改变原始状态

handleCheckbox(e) {
    const name = e.target.name;
    const checked = e.target.checked;
    this.setState((prevState) => {
        return {
           type: {
              ...prevState.type,
              [name]: !prevState.type[name]
           }
        }
    });
}

在React

2 个答案: