在 React 中取消选中复选框后组件状态未更新答案

【问题标题】：Component state not updating after unchecking checkbox in React在 React 中取消选中复选框后组件状态未更新
【发布时间】：2020-08-12 17:35:18
【问题描述】：

我只是想使用多个复选框的 handleChange 方法更改我的应用程序的状态。

当我单击每个复选框时，我的状态从 false 更改为 true，但是当我取消选中它时，我的状态并没有改变以反映它，我似乎无法弄清楚为什么！

import React, { Component } from "react";

export class StepOne extends Component {
    constructor(props) {
        super(props);
        this.state = {
            box1: false,
            box2: false,
            box3: false,
        };
    }

    handleChange = (evt) => {
        const box = evt.target.name;
        this.setState({ [box]: !this.state.box });
    };

    render() {
        return (
            <div>
                <input type="checkbox" name="box1" onChange={this.handleChange} />
                <input type="checkbox" name="box2" onChange={this.handleChange} />
                <input type="checkbox" name="box3" onChange={this.handleChange} />
            </div>
        );
    }
}

【问题讨论】：

标签： reactjs checkbox components state

【解决方案1】：

使用点表示法时，编译器会尝试在状态中查找名为 box 的字段，因为它不存在 - 切换复选框时不会得到任何结果。

改用括号表示法：

handleChange = (evt) => {
    const box = evt.target.name;
    this.setState((prevState) => ({ 
       [box]: !prevState[box],
    }));
};

注意：在设置状态时考虑使用函数，以确保引用相关状态。

【讨论】：

【解决方案2】：

你只需要改变你的handleChange函数如下：

  handleChange = (evt) => {
    const box = evt.target.name;
    this.setState([box]: evt.target.checked);
  };

这将使状态与复选框的选中状态相同（如果复选框被选中，则状态将设置为 true，如果未选中，则将其设置为 false）。如果您对此解决方案有任何其他问题，可以发表评论，以便我为您提供更多帮助

【讨论】：