Состояние компонента не обновляется после снятия флажка в React

Question

Я просто хочу изменить состояние моего приложения с помощью метода handleChange для нескольких флажков.

Мое состояние изменяется с ложного на истинное, когда я нажимаю на каждый из своих флажков, но когда я отменяю флажок, мое состояние не изменяется, чтобы отразить его, и я не могу понять, почему!

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

вам просто нужно внести изменения в функцию handleChange, как показано ниже:

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

это даст государству то же проверенное состояние флажка (если флажок установлен, состояние будет установлено в true, если это не так, будет установлено значение false). Если у вас есть другие проблемы с этим решением, вы можете прокомментировать, чтобы я мог помочь вам больше

Answer 2

При использовании точечной нотации компилятор пытается найти поле с именем box в состоянии, и поскольку оно не существует - вы не получите никакого результата при переключении флажка.

Использование вместо этого в скобках:

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

Примечание : рассмотрите возможность использования функции при установке состояния, чтобы убедиться, что вы ссылаетесь на соответствующее состояние.