有没有办法在数组中获取复选框的选中值？ [反应]答案

【问题标题】：Is there a way to get checkbox's checked value in array? [React]有没有办法在数组中获取复选框的选中值？ [反应]
【发布时间】：2020-01-11 04:21:43
【问题描述】：

此复选框 [ 看起来像切换按钮] 基于数据生成。我想在数组中获取检查值。

代码

{this.state.customersmsselect.map((e, key) => {
  
  if(e.isactive == "ON"){
  return (
    <div key={key}>
      <div className="form-group col-md-8">
        <label className="col-md-4 control-label">{e.notificationtype}</label>
        <div className="col-md-4 smart-form">
          <label className="toggle">
            <input type="checkbox" id={"smscheckbox" + key} value={e.isactive + "," + e.smstemplateid} name={"checkbox-toggle"+e.smstemplateid} onChange={this.onChangeFavorite} defaultChecked />
            <i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
        </label>
      </div>
    </div>
    <div style={{ margin: 10 }}>&nbsp;</div>
    </div>
  );

我的 onChange 方法

如果点击那个按钮，我会得到那个按钮的名字。

   onChangeFavorite(event) {
     if(!event.target.checked){
        console.log(event.target.name);
     }
   };

我的 customersmsselect 数组看起来像

0: {smstemplateid: "1", notificationtype: "Invoice Details", isactive: "ON"}
1: {smstemplateid: "2", notificationtype: "Payment Thank-You", isactive: "ON"}
2: {smstemplateid: "3", notificationtype: "Daily Closing Balance", isactive: "OFF"}
3: {smstemplateid: "4", notificationtype: "Monthly Closing Balance", isactive: "ON"}

问题

当我点击按钮时，我想在一个数组中获取所有选中的值。

【问题讨论】：

看起来像重复：stackoverflow.com/questions/590018/…
我想要一个反应的解决方案，我不想用Jquery来操作DOM
您必须在 OnChange 事件中捕获 CheckBox 状态并将其存储在状态对象中。然后在需要时从 State 获取值

标签： javascript reactjs checkbox

【解决方案1】：

在这里，我们可以改为使用受控输入。然后我们需要绑定选中的属性并在 onChange 处理程序中设置状态。 checked={e.isactive === "ON"} 根据值检查复选框。 onChange={()=>this.onChangeFavorite(e)} 将附加事件处理程序以及正在映射的customersmsselect 项。

x.isactive = x.isactive === "OFF" ? "ON" : "OFF";
        this.setState({
          customersmsselect: this.state.customersmsselect
});

是否对输入进行必要的检查。

{this.state.customersmsselect.map((e, key) => {
  $('#s').val(key);
  if(e.isactive == "ON"){
  return (
    <div key={key}>
      <div className="form-group col-md-8">
        <label className="col-md-4 control-label">{e.notificationtype}</label>
        <div className="col-md-4 smart-form">
          <label className="toggle">
            <input type="checkbox" id={"smscheckbox" + key} value={e.isactive + "," + e.smstemplateid} name={"checkbox-toggle"+e.smstemplateid} onChange={()=>this.onChangeFavorite(e)} checked={e.isactive === "ON"} />
            <i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
        </label>
      </div>
    </div>
    <div style={{ margin: 10 }}>&nbsp;</div>
    </div>
  );

然后

onChangeFavorite(x) {
     //Here now we are directly changing the array element value. 
     //Since its in the state when we change and assign it will automatically
     //update the controlled components.


    x.isactive = x.isactive === "OFF" ? "ON" : "OFF";
    this.setState({
      customersmsselect: this.state.customersmsselect
    });
};

【讨论】：

如果您对此解决方案有疑问，请随时提问。

【解决方案2】：

你可以尝试像这样使用 ref：

{this.state.customersmsselect.map((e, key) => {
  $('#s').val(key);
  if(e.isactive == "ON"){
  return (
    <div key={key}>
      <div className="form-group col-md-8">
        <label className="col-md-4 control-label">{e.notificationtype}</label>
        <div className="col-md-4 smart-form">
          <label className="toggle">
            <input type="checkbox" id={"smscheckbox" + key} value={e.isactive + "," + e.smstemplateid} name={"checkbox-toggle"+e.smstemplateid} onChange={this.onChangeFavorite} defaultChecked ref={node => { this.checkBoxes[key] = node; }} />
            <i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
        </label>
      </div>
    </div>
    <div style={{ margin: 10 }}>&nbsp;</div>
    </div>
  );

那么你可以将 this.checkBoxes 称为常规数组

【讨论】：

我认为这里不需要 ref 。我们可以在没有参考的情况下实现这一点。
同意你提到的方式。

【解决方案3】：

您的输入字段：

<input type="checkbox" id={"smscheckbox" + key} value={e.isactive} name={"checkbox-toggle"+e.smstemplateid} onChange={(event) => this.onChangeFavorite(event, key)} checked={e.isactive === "ON"} />

您的 onChange 事件：

onChangeFavorite(event, index) {
  const shouldBeOnOrOff =
    this.state.customersmsselect[index].isactive === "ON" ? "OFF" : "ON";
  this.setState({
    customersmsselect: this.state.customersmsselect.map((item, i) =>
      index === i ? { ...item, isactive: shouldBeOnOrOff } : item
    )
  });
}

这将为您提供当前打开的对象数组：

this.state.customersmsselect.filter((item) => item.isactive === "ON");

这将为您提供当前打开的 ID 数组，我认为这是您想要的值？

this.state.customersmsselect.filter((item) => item.isactive === "ON").map((item) => item.smstemplateid);

演示： https://codesandbox.io/s/quiet-morning-j6dbx?fontsize=14

【讨论】：