reactjs - 取消选中 React 中的复选框后组件状态不会更新

Question

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

当我单击每个复选框时，我的状态从 false 更改为 true，但是当我取消选中它时，我的状态不会更改以反射(reflect)它，我似乎无法弄清楚为什么!

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

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