Блог

Я хочу выбрать / отменить все значения флажков в 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");
}
  

Я не могу понять, как снять флажок «Все» внутри таблицы. Как установить флажок выбрать / снять все? Кто-нибудь может мне помочь?

Вы могли бы начать с добавления состояния флажка к данным, чтобы это выглядело так:

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

Вы хотите, чтобы каждый флажок проверялся один за другим, а также с помощью кнопки «Проверить все» справа? 1: Если нет, должно быть достаточно ввести флаг в состояние, чтобы установить / снять все флажки. 2: Если это так, вам нужно будет обработать состояния всех флажков в состоянии компонента. Если вы не хотите хранить все свои данные в состоянии, как описывали ребята до меня, вы все равно можете создать массив только с идентификатором (или некоторыми уникальными идентификаторами) каждого выбранного флажка и в JSX проверить, присутствует ли идентификатор текущего отображаемого флажка в этом массиве установленных флажков или в спискемассив непроверенных флажков.

Код для 1-го варианта:

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