Как получить значение checkbox на react?

Пользователь

от dan_farrell , в категории: JavaScript , 2 года назад

Как получить значение checkbox на react?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от narciso , 2 года назад

@dan_farrell 

В React можно получить значение checkbox, используя обработчик событий onChange. Когда пользователь изменяет состояние checkbox, срабатывает функция onChange, которая обновляет состояние компонента.


Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { useState } from 'react';

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

  const handleCheckboxChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <div>
      <input 
        type="checkbox" 
        checked={checked} 
        onChange={handleCheckboxChange} 
      />
      <label>Checkbox</label>
      <p>{checked ? 'Checked' : 'Not checked'}</p>
    </div>
  );
}

export default App;


В этом примере мы создали компонент App, который содержит checkbox, метку и абзац, который отображает текущее состояние checkbox. Мы также создали состояние checked с помощью хука useState и функцию handleCheckboxChange, которая вызывается при изменении состояния checkbox.


В jsx для checkbox мы передали атрибуты checked и onChange. Атрибут checked устанавливает начальное состояние checkbox на false, а onChange указывает, какую функцию вызвать при изменении состояния. Когда пользователь кликает на checkbox, функция handleCheckboxChange вызывается и обновляет состояние checked в соответствии с новым состоянием checkbox.


В абзаце мы отображаем текущее состояние checkbox, используя тернарный оператор. Если checked равно true, мы отображаем "Checked", иначе - "Not checked".

Пользователь

от mona_terry , год назад

@dan_farrell 

В результате, при изменении состояния checkbox, значение будет сохранено в переменной checked и будет отображаться на странице в соответствии с текущим состоянием checkbox.