Блог

Главная - Вопросы по программированию - Введите число в массив useState

Введите число в массив useState

#reactjs #react-hooks #use-state

Вопрос:

В форме, имеющей несколько флажков, я хочу сохранить значения флажка в массиве useState после нажатия кнопки отправить. Также пользователь может несколько раз установить/снять флажок перед отправкой формы. Каким может быть подход/код?

Комментарии:

1. Что вы пробовали до сих пор? Это похоже на стандартный подход к реактивным формам.

2. я попытался сохранить значения флажка в отдельной переменной useState,инициализированной 0, затем проверил, если значение checkbox1>0, затем установите флажок(старый=>>{…старый,значение checkbox1}), аналогично проверенный для других флажков.

Ответ №1:

У каждого флажка есть свойство «проверено», поэтому в состоянии у вас должен быть массив со всеми отмеченными флажками.

 const [selectedCheckboxes, setSelectedCheckboxes] = useState([]);

Например, вы можете также хранить флажки в массиве:

 const checkboxes = [{name: 'cb1', label:'cb1'}, {name: 'cb2', label:'cb3'}, ...];

и все они должны иметь один и тот же метод обмена:

 onCheckBoxChange = (event) => {
const selectedCheckboxes = [...selectedCheckboxes];
const isChecked = selectedCheckboxes.includes(event.target.name);
if (!isChecked) {
  selectedCheckboxes.push(event.target.name);
} else {
  selectedCheckboxes.splice(selectedCheckboxes.indexOf(event.target.name), 1);
}
setSelectedCheckboxes(selectedCheckboxes);

};

обычная функция, которая проверяет, установлен ли флажок:

 isChecked = (cb) => selectedCheckboxes.includes(cb.name);

и каждый флажок должен выглядеть так:

    <CheckBox
  name={cb.name}
  checked={isChecked(cb)}
  onChange={onCheckBoxChange}
  {...props}
/>

Ответ №2:

Вы можете сделать это несколькими способами. Вы можете просто const checkboxOpenArray = [] указать, где вы будете просто хранить логические значения, как [true, false, false, true] это будет сделано позже в коде, где вы, вероятно .map , через все флажки, вы просто проверяете, checkboxOpenArray[idx] откуда idx вы пришли .map . Если это правда, вы просто установите флажок в значение true. То же самое для onChange — вы просто находите idx в checkboxOpenArray и устанавливаете его в значение false или true.

Метки: