Reactjs 在React中切换复选框

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

当我选中该框时，状态会更新，而当我

console.log

它们时，状态、上一个状态和选中项会显示

true

，这本身就很奇怪。但是复选框没有选中

状态

    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];
    });
}

处理事件更改

    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}
/>

---

更新您的handleCheckbox 你会发现原来的州就是这个州

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 });
}

---

从功能设置状态，您需要返回要更新的状态，而不是改变原始状态

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

---

我在控制台中遇到错误，如果我尝试此操作，我的代码编辑器会将setState代码高亮显示为红色。