在 React 中切换复选框

Question

我在尝试切换 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];
    });
}

复选框

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

Answer 1

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

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

Answer 2

更新你的 handleCheckbox 你会发现旧状态为 this.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 });
}