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>
));

如何选择/取消选择React JS中的所有复选框？

2 个答案: