Как добавить несколько флажков в состояние

Question

Как сохранить несколько флажков в одном состоянии и добавить каждый флажок в свое предыдущее состояние?

Это мои состояния:

Operators : '',
TypeStatus : '',
RegistrationStatus : '',

Это моя функция:

changeHandle = (event) => {
    this.setState({
        [event.target.name]:  event.target.value
    });
};

Это мой ввод: я хочу нажать на каждый из этих флажков, чтобы добавить значение в состояние и добавить класс RegisterButtonsActivation к родительской метке

  <div className="container-fluid">
    <div className="row flex-row-reverse">

        <div className="col" data-toggle="buttons">
            <label className="RegisterButtons">
                <input
                    type="checkbox"
                    name="Operators"
                    id="MCI"
                    value="MCI"
                    checked={this.state.operations}
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterOperatorMCI}
                />
                همراه اول
            </label>
        </div>

        <div className="col" data-toggle="buttons">
            <label className="RegisterButtons">
                <input
                    type="checkbox"
                    name="Operators"
                    id="irancell"
                    value="irancell"
                    checked={true}
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterOperatorIrancell}
                />
                ایرانسل
            </label>
        </div>

        <div className="col" data-toggle="buttons">
            <label className="RegisterButtons">
                <input
                    type="checkbox"
                    name="Operators"
                    id="rightel"
                    value="rightel"
                    checked={this.state.operations}
                    onChange={this.changeHandle}
                    onClick={this.handleFilterOperatorRightel}
                />
                رایتل
            </label>
        </div>

    </div>
    <div className="row justify-content-center">
        <div className="col">
            <hr className="hr-Filterbox" />
        </div>
    </div>
    <div className="row flex-row-reverse">

        <div className="col">
            <label className={`RegisterButtons ${this.state.TypeStatus === 
   "Justice" ? 'RegisterButtonsActivated' : ''}`}>
                <input
                    type="checkbox"
                    name="TypeStatus"
                    id="Justice"
                    value="Justice"
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterTypeJustice}
                />
                دائمی
            </label>
        </div>

        <div className="col">
            <label className={`RegisterButtons ${this.state.TypeStatus === 
   "Credit" ? 'RegisterButtonsActivated' : ''}`}>
                <input
                    type="checkbox"
                    name="TypeStatus"
                    id="Credit"
                    value="Credit"
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterTypeCredit}
                />
                اعتباری
            </label>
        </div>

    </div>
    <div className="row justify-content-center">
        <div className="col">
            <hr className="hr-Filterbox" />
        </div>
    </div>
    <div className="row flex-row-reverse">

        <div className="col" data-toggle="buttons">
            <label className={`RegisterButtons ${this.state.OperatingStatus 
  === "New" ? 'RegisterButtonsActivated' : ''}`}>
                <input
                    type="checkbox"
                    name="OperatingStatus"
                    id="New"
                    value="New"
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterWorkStatusNew}
                />
                صفر
            </label>
        </div>


        <div className="col" data-toggle="buttons">
            <label className={`RegisterButtons ${this.state.OperatingStatus 
 === "LowPerformance" ? 'RegisterButtonsActivated' : ''}`}>
                <input
                    type="checkbox"
                    name="OperatingStatus"
                    id="LowPerformance"
                    value="LowPerformance"
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterWorkStatusOld}
                />
                کم کارکرد
            </label>
        </div>

        <div className="col" data-toggle="buttons">
            <label className={`RegisterButtons ${this.state.OperatingStatus 
   === "Old" ? 'RegisterButtonsActivated' : ''}`}>
                <input
                    type="checkbox"
                    name="OperatingStatus"
                    id="Old"
                    value="Old"
                    onChange={this.changeHandle}
                    onClick={this.props.handleFilterWorkStatusLowPerformance}
                />
                کارکرده
            </label>
        </div>

    </div>
  </div>

Я хочу нажать на каждыйиз этих флажков, чтобы добавить значение в состояние и добавить класс RegisterButtonsActivation к родительской метке

Answer 1

Вы можете сделать это следующим образом .....

this.state = {
 checkboxes: {
  Operators: null,
  TypeStatus: null,
  RegistrationStatus: null,
 }
}

Ниже будет обработано изменение существующего состояния, и если вы передадите новый флажок, он добавит новый ключ к объекту состояния.

changeHandle = (event) => {     
  this.setState((prevState) => ({
    checkboxes: {...prevState.checkboxes, [event.target.name]: event.target.value }
  }))
};

Answer 2

Вы можете сделать это с вашим государством;

this.state = {
   checkboxes: {
    Operators: {
      currentValue: null,
      previousValues:[]
    },
    TypeStatus: {
      currentValue: null,
      previousValues:[]
    },
    RegistrationStatus: {
      currentValue: null,
      previousValues:[]
    },
   }
 }

Теперь ваш обработчик будет выглядеть примерно так;

changeHandle = (event) => {
  const checkboxes = this.state.checkboxes;
  checkboxes[event.target.name].currentValue = event.target.value;      
  checkboxes[event.target.name].previousValues.push(event.target.value); // last element will be the latest value.
  this.setState({
    checkboxes
  });
};