在React中取消选中复选框后，组件状态不更新。

Question

我只是想用一个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>
        );
    }
}

Answer 1

当使用点符号时，编译器试图寻找一个称为 "点 "的字段。box 在状态中，由于它不存在--当你切换复选框时，你没有得到任何结果。

使用括号符号代替。

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

注: 考虑在设置状态时使用一个函数，以确保你引用的是相关状态。

Answer 2

你只需要在你的handleChange函数中做如下修改。

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

这将使状态与复选框的选中状态相同(如果复选框被选中，状态将被设置为true，如果它没有被选中，它将被设置为false)。