Чекбоксы и радио кнопки в стейтах React

В прошлой статье "Инпуты в стейтах React" был рассмотрен пример изменения текстового поля. В этой статье продолжим тему работы с инпут полями и приведём примеры кодя, которые позволяют работать с радио кнопками и чекбоксами.

Чекбоксы в стейтах React

Чекбоксы как и остальны input'ы требуют программной установки галочки при нажатии. То есть родной механизм браузера не будет работать, нужно писать JavaScript код, который срабатывает по событию onChange и устанавливает/снимает галочку.

При этом установка галочки делается атрибутом "chacked", который выставляется в положение "true" или "false". Приведём пример такого обработчика для установки галочки:

import React, { useState } from 'react';

function App() {
   const [checked, setChecked] = useState(true);

   function chengeCheckbox() {
      setChecked(!checked);
   }

   return <div>
      <input type="checkbox" checked={checked} onChange={chengeCheckbox} />
   </div>;
}

export default App;

При выполнении такого кода на странице появится один чекбокс (поле, куда можно поставить галочку). По умолчанию галочка будет стоять. Один клик снимет её, а повторный установит заново.

Попробуем сократить программный код примера с помощью стрелочной стрелочную функции и вывести значение с помощью тернарного оператора:

import React, { useState } from 'react';

function App() {
   const [checked, setChecked] = useState(true);

   return <div>
      <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
      <span>{checked ? 'галочка есть' : 'галочки нет'}</span>
   </div>;
}

export default App;

Если необходимо сделано несколько операций для формирования надписи "галочка есть" рядом с чекбоксом, то логично будет вынести всё в отдельное условие и добавить переменную:

import React, { useState } from 'react';

function App() {
   const [checked, setChecked] = useState(true);
   
   let msg;
   if(checked){
      msg = <span>галочка есть</span>
   }else{
      msg = <span>галочки нет</span>
   }

   return <div>
      <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
      <span>{msg}</span>
   </div>;
}

export default App;

Радио кнопки в стейтах React

Работа с радиокнопками в React схожа с чекбоксами. Но если для каждого чекбокса в приложении используется отдельный стейт, то радиокнопки объединяются в группы. И для групп используется только один стейт. Остальное же взаимодействие происходит точно так же, как и с чекбоксами: нужно делать событие onChange для изменения состояния. Приведём пример кода:

import React, { useState } from 'react';

function App() {
   const [value, setValue] = useState(1);
   
   function chengeValue() {
      setValue(event.target.value);
   }

   return <div>
      <input type="radio" name="radio" value="1"
      checked={value == '1' ? true : false}
      onChange={chengeValue} />

      <input type="radio" name="radio" value="2"
      checked={value == '2' ? true : false}
      onChange={chengeValue} />

      <input type="radio" name="radio" value="3"
      checked={value == '3' ? true : false}
      onChange={chengeValue} />
   </div>;
}

export default App;

Для упрощения примера были использованы значение радио кнопок в виде цифр. При загрузке такого приложения появится три радио кнопки. Из них отмечена будет первая кнопка, у которой value="1". Если кликнуть на другие варианты, то выбор будет изменён.