ReactJS：处理多个复选框答案

【问题标题】：ReactJS: Handle multiple checkboxesReactJS：处理多个复选框
【发布时间】：2020-05-12 20:04:15
【问题描述】：

我正在处理我网站上的多个复选框。这是我的状态

 state = {
    data: {
      airport_transport: false,
      night_club: false,
      wifi: false,
      parking: false,
      swimming_pool: false,
      restaurant: false,
      gym: false,
      air_conditioner: false,
      laundry_services: false,
      bar_lounge: false,
      disabled_services: false,
      elevator: false,
      shuttle_bus_service: false,
      cards_accepted: false,
    },
    errors: {},
  };

这就是我处理复选框状态的方式。我只发布了几个处理方法

 toggleChangeShuttle = () => {
    let data = this.state.data;
    data.shuttle_bus_service = !data.shuttle_bus_service;
    this.setState({ data });
  };

  toggleChangeAirport = () => {
    let data = this.state.data;
    data.airport_transport = !data.airport_transport;
    this.setState({ data });
  };
  toggleChangeCooling = () => {
    let data = this.state.data;
    data.air_conditioner = !data.air_conditioner;
    this.setState({ data });
  };
  toggleChangeNightClub = () => {
    let data = this.state.data;
    data.night_club = !data.night_club;
    this.setState({ data });
  };

最后这就是我的渲染方式。我省略了额外的渲染方法

<div className="form-check">
                <label className="container">
                  <input
                    type="checkbox"
                    checked={this.state.data.air_conditioner}
                    onChange={this.toggleChangeCooling}
                    className="form-check-input"
                  />
                  <span className="checkmark"></span>
                  Air Conditioner
                </label>
              </div>
              <div className="form-check">
                <label className="container">
                  <input
                    type="checkbox"
                    checked={this.state.data.airport_transport}
                    onChange={this.toggleChangeAirport}
                    className="form-check-input"
                  />
                  <span className="checkmark"></span>
                  Airport Transport
                </label>{" "}
              </div>
              <div className="form-check">
                <label className="container">
                  <input
                    type="checkbox"
                    checked={this.state.data.bar_lounge}
                    onChange={this.toggleChangeBarLounge}
                    className="form-check-input"
                  />
                  <span className="checkmark"></span>
                  Bar Lounge
                </label>{" "}
              </div>

现在这看起来是手动的，有很多重复。有没有一种紧凑干净的方法来做到这一点？谢谢

【问题讨论】：

标签： reactjs checkbox

【解决方案1】：

为您的复选框命名（作为您的状态属性）并使用使用复选框名称设置状态的单一方法

toggleCheckbox = (e) => {
  const checkboxName = e.target.name;
  this.setState((state) => ({
    data: {
      ...state.data,
      [checkboxName]: !state.data[checkboxName]
    }
  }));
};


<input 
  type="checkbox" 
  name="airport_transport"
  checked={this.state.data.airport_transport} 
  onChange={this.toggleCheckbox} 
  className="form-check-input" 
/>

【讨论】：

抱歉回复晚了，但我选择了这个解决方案而不是另一个，因为它有更多信息。感谢您的帮助，先生

【解决方案2】：

是的，有一种更简单的方法可以做到这一点。不要为每个属性执行单独的函数，而是按照以下方式执行操作：

onChange = (event) => {
    let name = event.target.name
    this.setState(prevState => (
        {
         data[name]: !prevState.data[property]
        }
    )
}

您可以将每个输入上的“名称”属性设置为等于您要更改的状态。这会将事件传递给函数，您可以根据选中的文本框动态设置状态。

【讨论】：