Javascript 如何处理复选框数组的状态？

有没有办法处理复选框数组的选中状态

我有这个阵列：

const CheckboxItems = t => [
  {
    checked: true,
    value: 'itemsCancelled',
    id: 'checkBoxItemsCancelled',
    labelText: t('cancellations.checkBoxItemsCancelled'),
  },
  {
    checked: true,
    value: 'requestDate',
    id: 'checkboxRequestDate',
    labelText: t('cancellations.checkboxRequestDate'),
  },
  {
    checked: true,
    value: 'status',
    id: 'checkboxStatus',
    labelText: t('cancellations.checkboxStatus'),
  },
  {
    checked: true,
    value: 'requestedBy',
    id: 'checkboxRequestedBy',
    labelText: t('cancellations.checkboxRequestedBy'),
  },
];

我在这里使用它：

class TableToolbarComp extends React.Component {
    state = {
        isChecked: true,
    };

    onChange = (value, id, event) => {       
      this.setState(({ isChecked }) => ({ isChecked: !isChecked }));
    };


    render() {
      const { isChecked } = this.state;
      return (
        {CheckboxItems(t).map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              checked={isChecked}
              onChange={this.onChange}
            />
          </ToolbarOption>
        ))}

      )
    }
}

类tabletorbacomp扩展了React.Component{
状态={
我问：是的，
};
onChange=（值、id、事件）=>{
this.setState（（{isChecked}）=>（{isChecked:！isChecked}））；
};
render（）{
const{isChecked}=this.state；
返回(
{CheckboxItems（t）.map（item=>(
))}
)
}
}

我遇到的问题是，每次我不检查一个，其余的也不检查。我需要单独管理状态，通过redux操作将一些信息发送给其他组件

编辑：

您正在使用容器的

isChecked

作为所有复选框的状态，使用容器上的一个方法翻转它应用于所有复选框的一个标志（

isChecked

）

取而代之的是：

为复选框本身指定状态，而不是使其成为简单的对象，或

在由复选框项（或其名称）键入的容器中维护状态映射

我倾向于#1，我认为在这个库中会是这样的：

class TableToolbarComp extends React.Component {
    state = {
        items: CheckboxItems(t) // Your code seems to have a global called `t`
    };

    onChange = (value, id, event) => {       
        this.setState(({ items }) => {
          // Copy the array
          items = items.slice();
          // Find the matching item
          const item = items.find(i => i.id === id);
          if (item) {
              // Update its flag and set state
              item.checked = !item.checked;
              return { items };
          }
        });
    };

    render() {
      const { items } = this.state;
      return (
        {items.map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              checked={item.checked}
              onChange={this.onChange}
            />
          </ToolbarOption>
        ))}

      )
    }
}

类tabletorbacomp扩展了React.Component{
状态={
items:CheckboxItems（t）//您的代码似乎有一个名为't'的全局`
};
onChange=（值、id、事件）=>{
this.setState（（{items}）=>{
//复制数组
items=items.slice（）；
//找到匹配项
const item=items.find（i=>i.id==id）；
如果（项目）{
//更新其标志并设置状态
item.checked=！item.checked；
返回{items}；
}
});
};
render（）{
const{items}=this.state；
返回(
{items.map（item=>(
))}
)
}
}

变化：

• 调用

  CheckboxItems

  一次，将结果保留为状态
• 在

  onChange

  中，通过

  id

  （lib传递

  id

  ）找到相关复选框，并翻转其

  选中的

  标志
• 在

  render

  中，从状态中获取

  项

  ，对于每个项，使用其

  已选中的

  标志，而不是您的`isChecked（我已完全删除）

您正在使用容器的

isChecked

作为所有复选框的状态，使用容器上的方法翻转应用于所有复选框的一个标志（

isChecked

）

取而代之的是：

为复选框本身指定状态，而不是使其成为简单的对象，或

在由复选框项（或其名称）键入的容器中维护状态映射

我倾向于#1，我认为在这个库中会是这样的：

class TableToolbarComp extends React.Component {
    state = {
        items: CheckboxItems(t) // Your code seems to have a global called `t`
    };

    onChange = (value, id, event) => {       
        this.setState(({ items }) => {
          // Copy the array
          items = items.slice();
          // Find the matching item
          const item = items.find(i => i.id === id);
          if (item) {
              // Update its flag and set state
              item.checked = !item.checked;
              return { items };
          }
        });
    };

    render() {
      const { items } = this.state;
      return (
        {items.map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              checked={item.checked}
              onChange={this.onChange}
            />
          </ToolbarOption>
        ))}

      )
    }
}

类tabletorbacomp扩展了React.Component{
状态={
items:CheckboxItems（t）//您的代码似乎有一个名为't'的全局`
};
onChange=（值、id、事件）=>{
this.setState（（{items}）=>{
//复制数组
items=items.slice（）；
//找到匹配项
const item=items.find（i=>i.id==id）；
如果（项目）{
//更新其标志并设置状态
item.checked=！item.checked；
返回{items}；
}
});
};
render（）{
const{items}=this.state；
返回(
{items.map（item=>(
))}
)
}
}

变化：

• 调用

  CheckboxItems

  一次，将结果保留为状态
• 在

  onChange

  中，通过

  id

  （lib传递

  id

  ）找到相关复选框，并翻转其

  选中的

  标志
• 在

  render

  中，从状态中获取

  项

  ，对于每个项，使用其

  已选中的

  标志，而不是您的`isChecked（我已完全删除）

---

您使用的是提供<代码>复选框组件的库吗？语义UI，引导/材料设计，…？Hi@T.J.Crowder这就是我使用的：您使用的是提供<代码>复选框组件的库吗？语义UI，引导/材料设计，…？Hi@T.J.Crowder这是我使用的：您能请提供一个简短的代码示例，介绍如何完成您上面提到的第一件事。这是我正在使用的库：@TheUnnamed-我想（不要相信我的话，我以前从未见过这个库，只是花了几分钟阅读了您对这个问题的评论）有了这个库，你不能将状态存储在复选框本身上，你必须使用包装器组件来执行#1或执行#2。我不想在不了解库的情况下尝试编写代码，但我很确定这些是你的选择（包装器组件或状态映射）.@TheUnnamed-但我试了一下。：-）你能提供一个简短的代码示例，说明如何做上面提到的第一件事吗？请。这是我正在使用的库：@TheUnnamed-我想（不要相信我的话，我以前从未见过这个库，只是花了几分钟阅读了你对这个问题的评论）有了这个库，你不能将状态存储在复选框本身上，你必须使用包装器组件来执行#1或执行#2。我不想在不了解库的情况下尝试编写代码，但我很确定这些是你的选择（包装器组件或状态映射）.@TheUnnamed-但我试了一下。：-）