Блог

Главная - Вопросы по программированию - Как я могу отследить, был ли установлен один или несколько флажков в группе с помощью useState hook?

Как я могу отследить, был ли установлен один или несколько флажков в группе с помощью useState hook?

#reactjs #react-hooks #setstate

Вопрос:

  • «реагировать»: «>=16.14.0»,
  • «react-dom»: «>=16.14.0»
  • «@материал-пользовательский интерфейс/ядро»: «4.11.1»,
  • «@материал-пользовательский интерфейс/значки»: «^4.9.1»,
  • «@материал-пользовательский интерфейс/лаборатория»: «^4.0.0-альфа.53»,
  • «@material-пользовательский интерфейс/сборщики»: «^3.2.10»,
  • «@материал-пользовательский интерфейс/стили»: «4.11.1»,

Вот пример одного флажка, который переключается selected и отображает ошибку, если он снят.

Один флажок

 const [selected, setSelected] = useState(false); 
const handleOnChange = (event) => setSelected(!selected);

<CheckBoxGroup error={!selected amp;amp; 'You have to choose one!'} name="color" onChange={handleOnChange} label="Chose one" row>
  <CheckBox label="1" />
</CheckBoxGroup>;

И вот тот же самый, с несколькими флажками. Я понимаю, что мне нужно обновить свою handleOnChange функцию, где я, возможно, мог бы использовать .find , чтобы увидеть, установлен ли какой-либо флажок для возврата true , но я не могу понять, что передать функции, т. Е. Как мне получить доступ к массиву флажков?

Более одного флажка

 const [selected, setSelected] = useState(false); 
const handleOnChange = (event) => setSelected(!selected);

<CheckBoxGroup error={!selected amp;amp; 'You have to choose one!'} name="color" onChange={handleOnChange} label="Chose one" row>
  <CheckBox label="1" />
  <CheckBox label="2" />
  <CheckBox label="3" />
</CheckBoxGroup>;

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

1. Какую библиотеку реакций вы используете?

2. Извините, «реагировать»: «>=16.14.0», «реагировать-дом»: «>>=16.14.0».

3. будет ли в любой момент времени установлен только один флажок

4. Нет, я имел в виду, какую библиотеку реакций вы используете для своей CheckBoxGroup ?

5. «@материал-пользовательский интерфейс/ядро»: «4.11.1», «@материал-пользовательский интерфейс/значки»: «^4.9.1», «@материал-пользовательский интерфейс/лаборатория»: «^4.0.0-альфа.53», «@материал-пользовательский интерфейс/сборщики»: «^3.2.10», «@материал-пользовательский интерфейс/стили»: «4.11.1»,

Ответ №1:

Во-первых, вы должны дать своим <CheckBox> компонентам name опору и ан onChange . Затем создайте начальное состояние для флажков и передайте его при инициализации состояния. В change обработчике мы устанавливаем состояние для каждого флажка в соответствии с соответствующим name checked значением и. Установите значение <CheckBox> ‘s checked равным соответствующему значению состояния.

 export default function App() {
  // create an initial value for checkboxes
  const initialStatus = {
    first: false,
    second: false,
    third: false
  }

  // initialize a state variable to keep track of status
  const [checkboxStatus, setCheckboxStatus] = useState(initialStatus);
  
  // handle change event of checkboxes
  const handleChange = (e) => {
    e.preventDefault(); // prevent default action
    setCheckboxStatus({
      ...checkboxStatus,
      [e.target.name]: e.target.checked
    })
  }
  
  return (
    <div className="App">
      <CheckBox label="1" name="first" onChange={handleChange} checked={checkboxStatus.first} />
      <CheckBox label="2" name="second" onChange={handleChange} checked={checkboxStatus.second} />
      <CheckBox label="3" name="third" onChange={handleChange} checked={checkboxStatus.third} />
    </div>
  );
}

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

1. Спасибо за ваш ответ, но вы удалили CheckBoxGroup функцию, которая проверяет состояние checkboxStatus и показывает ошибку, если флажки не установлены.

2. Я давно не работал с CheckBoxGroup ними, но я думаю, что вы можете просто поставить флажки для того же результата.

3. Является ли группа флажков компонентом MUI?

4. Это с какими-то обертками. Спасибо за ваш ответ, он вывел меня на правильный путь.

Ответ №2:

После небольшой работы и спасибо @axtck за его ответ, который заставил меня взглянуть на проблему под другим углом.

 import { useState } from 'react';
import { CheckBox, CheckBoxGroup } from '@globalization-partners/ui-components';

const [selected, setSelected] = useState([]); 
const handleOnChange = (event) => setSelected(event.target.checked ? [...selected, event.target.value] : selected.filter((data) => data !== event.target.value));

<CheckBoxGroup error={selected.length === 0 amp;amp; 'You have to choose one!'} onChange={handleOnChange} label="Chose one" row>
  <CheckBox value='First' label='First' />
  <CheckBox value='Second' label='Second' />
  <CheckBox value='Third' label='Third' />
</CheckBoxGroup>;
Метки: ,