React中如何将切换按钮样式的复选框选中值存入数组？

我来帮你搞定这个需求！要把所有选中的复选框值存入数组，这里有两种可行的实现方式，推荐用React受控组件的方案，更贴合React的状态管理逻辑：

方案一：使用受控组件（推荐） #

这种方式让复选框的选中状态完全由组件state控制，能更精准地维护选中数据：

1. 初始化选中状态数组 #

在组件的state里添加一个数组，用来存储选中的模板ID（或者你需要的字段），并且根据初始的customersmsselect数据初始化这个数组：

constructor(props) {
  super(props);
  this.state = {
    customersmsselect: [
      {smstemplateid: "1", notificationtype: "Invoice Details", isactive: "ON"},
      {smstemplateid: "2", notificationtype: "Payment Thank-You", isactive: "ON"},
      {smstemplateid: "3", notificationtype: "Daily Closing Balance", isactive: "OFF"},
      {smstemplateid: "4", notificationtype: "Monthly Closing Balance", isactive: "ON"}
    ],
    // 初始化选中的模板ID数组：筛选isactive为ON的项
    selectedSmsTemplates: []
  };
  
  // 初始化选中数组
  this.state.selectedSmsTemplates = this.state.customersmsselect
    .filter(item => item.isactive === "ON")
    .map(item => item.smstemplateid);
}

2. 修改复选框为受控组件 #

把原来的defaultChecked改成checked，由state里的选中数组控制，同时简化value为模板ID，方便后续处理：

{this.state.customersmsselect.map((e, key) => (
  <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.smstemplateid} // 直接用模板ID作为value
            name={"checkbox-toggle"+e.smstemplateid} 
            onChange={() => this.handleCheckboxChange(e.smstemplateid)} 
            checked={this.state.selectedSmsTemplates.includes(e.smstemplateid)} // 受控选中状态
          />
          <i data-swchoff-text='OFF' data-swchon-text='ON' ></i>
        </label>
      </div>
    </div>
    <div style={{ margin: 10 }}>&nbsp;</div>
  </div>
))}

3. 编写状态更新方法 #

每次点击复选框时，更新选中数组，之后就能随时获取所有选中项：

handleCheckboxChange = (templateId) => {
  this.setState(prevState => {
    const currentSelected = prevState.selectedSmsTemplates;
    // 判断当前模板ID是否已在选中数组中
    const isSelected = currentSelected.includes(templateId);
    
    let newSelected;
    if (isSelected) {
      // 取消选中：移除该ID
      newSelected = currentSelected.filter(id => id !== templateId);
    } else {
      // 选中：添加该ID
      newSelected = [...currentSelected, templateId];
    }
    
    return { selectedSmsTemplates: newSelected };
  }, () => {
    // 状态更新完成后，这里可以获取最新的选中数据
    console.log("选中的模板ID数组：", this.state.selectedSmsTemplates);
    
    // 如果需要完整的选中对象数组，直接用ID筛选原数据即可
    const selectedItems = this.state.customersmsselect.filter(item => 
      this.state.selectedSmsTemplates.includes(item.smstemplateid)
    );
    console.log("选中的完整对象：", selectedItems);
  });
};

方案二：通过DOM直接获取选中项（非受控） #

如果不想修改成受控组件，也可以在点击时直接通过DOM查询所有选中的复选框：

修改onChange方法 #

onChangeFavorite = (event) => {
  // 查找所有被选中的、name以checkbox-toggle开头的复选框
  const checkedBoxes = document.querySelectorAll('input[name^="checkbox-toggle"]:checked');
  
  // 转换为数组并提取模板ID（因为你原来的value是"ON,1"格式，所以split取第二个元素）
  const selectedIds = Array.from(checkedBoxes).map(box => box.value.split(",")[1]);
  
  console.log("选中的模板ID数组：", selectedIds);
  
  // 同样可以筛选出完整的选中对象
  const selectedItems = this.state.customersmsselect.filter(item => 
    selectedIds.includes(item.smstemplateid)
  );
  console.log("选中的完整对象：", selectedItems);
};

这个方案虽然简单，但依赖DOM操作，不如受控组件的方式符合React的设计思想，适合快速临时处理。

内容的提问来源于stack exchange，提问作者Akash Thoriya