如何在react js中选择/取消选择所有复选框？

Question

我想选择/取消选择 react js 中的所有复选框值。 我已经完成了单个复选框选择的代码，但无法为所有选择执行。

代码是 -

data.map((item) => (
    <tr key={item._id}>
        <td>{item.fname}</td>
        <td>{item.age}</td>
        <td>
            <input
                className="item"
                type="checkbox"
                id={item._id}
                name="contactId"
                value={item._id}
                checked={
                    theArray.indexOf(item._id) !== -1
                    ? true
                    : false
            }
            onChange={handleCheckbox}
            />
        </td>
    </tr>
))

数据是——

data: [
  {
    _id: '001',
    fname:'A',
    age:'20'
  },
  {
    _id: '002',
    fname:'B',
    age:'21'
  },
  {
    _id: '003',
    fname:'C',
    age:'22'
  },
  {
    _id: '004',
    fname:'D',
    age:'23'
  },
  {
    _id: '005',
    fname:'E',
    age:'24'
  }
]

数据也可以很大。 我的多选复选框代码 - <input type="checkbox" onClick={handleAllChecked} value="checkedall" />

handleAllChecked 的代码 -

const handleAllChecked=(e) =>{
console.log("a");
}

我无法理解如何在表格中取消选中所有复选框。 如何选择/取消选择所有复选框？ 谁能帮我吗？

Answer 1

您可以先将复选框的状态添加到数据中，如下所示：

{
    _id: '001',
    fname:'A',
    age:'20',
    checked: false,
  },

通过做这个：

data.map(element => ({ ...element, checked: false }));

然后在你的 jsx 中：

data.map((item) => (
    <tr key={item._id}>
        <td>{item.fname}</td>
        <td>{item.age}</td>
        <td>
            <input
                className="item"
                type="checkbox"
                id={item._id}
                name="contactId"
                value={item._id}
                checked={item.checked}
                onChange={handleCheckbox}
            />
        </td>
    </tr>
))

您可能需要将数据对象转换为组件的状态。 假设您使用钩子，您的处理程序将如下所示：

const handleAllChecked=(e) => {
   setData(data.map(element => element.checked = !element.checked));
}

所以你的数据对象会是这样的：

const [data, setData] = useState(initialData);

Answer 2

您是否希望每个复选框都被一一选中并且还通过“全部选中”按钮进行检查？ 1：如果没有，应该足以在状态中引入一个标志来选中/取消选中所有复选框。 2：如果是这样，您将需要处理组件状态下所有复选框的状态。 如果您不想像我之前描述的那样将所有数据存储在状态中，您仍然可以仅使用每个选定复选框的 id（或某些唯一标识符）创建一个数组，并在 JSX 中检查当前呈现的复选框的标识符是否为出现在这个选中的复选框数组或未选中的复选框数组中。

第一个选项的代码：

const [checkAll, setCheckAll] = useState(false); //false is the default, set to true if you want to be all checked by default

data.map((item) => (
    <tr key={item._id}>
        <td>{item.fname}</td>
        <td>{item.age}</td>
        <td>
            <input
                className="item"
                type="checkbox"
                id={item._id}
                name="contactId"
                value={item._id}
                checked={!checkAll ? 
                    theArray.indexOf(item._id) !== -1
                    ? true
                    : false
                    : true
            }
            onChange={handleCheckbox}
            />
        </td>
    </tr>
));