Задать вопрос
miliko0022
@miliko0022
Краткие личные сведения, включая интересующую вас
react

Как правильно изменять checkbox react?

Как лучше изменить checkbox.

вариант 1
import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);

  const soldCheckbox = ({ target: { checked } }) => {
    console.log(x, checked);
    setX(checked);
  };
  return (
    <div>
      <input type="checkbox" checked={x} onChange={soldCheckbox} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

вариант 2
import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);
  console.log(x);
  return (
    <div>
      <input type="checkbox" checked={x} onChange={() => setX(!x)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


в принципе я не вижу разницы но просто хотел услышать другое мнение. Может что-нибудь я не знаю
  • Вопрос задан
  • 40409 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 2
Heian
@Heian
Ашот
Самый лучший вариант - не использовать стейт. Вообще. Зачем он для чекбоксов? Это настолько раздуто и избыточно в 99% случаев, что хочется рвать волосенки на голове каждый раз, когда кто-то это использует. К счастью, React предоставляет uncontrolled inputs, чем я вам и рекомендую воспользоваться. Поскольку каждый раз, когда для таких компонентов используется стейт, означает, что данные сохраняются для последующей обработки, а последующая обработка в 99% случаев - отправка формы или иные ее события.

Но конечно, если при щелчку на чекбокс надлежит вызвать какое-то событие, без коллбэка не обойтись.
Ответ написан
Комментировать
Комментировать
rockon404
@rockon404 Куратор тега React
Frontend Developer
Первый вариант будет лучше если у вас форма и компонентов много. Можно обрабатывать все одним хандлером:
const handler = (e) => {
  const { target } = e;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const { name } = target;

  setForm( f => ({ ...f, [name]: value }));
};

Второй, если checkbox один и приложение должно как-то реагировать на его изменение. Но хандлер для лучшей читаемости, лучше вынести в переменную. Если это built-in компонент вроде input:
const handler = () => {
  setX(!x);
};

И если это кастомный компонент, то необходимо использовать useCallback, чтобы предотвратить лишние перерисовки:
const handler = useCallback(() => {
  setX(!x);
}, []);

Ну и неконтролируемые компоненты, упомянутые Алексей Николаев, в ряде кейсов могут быть очень удобны.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция WordPress со Smartomato
25 апр. 2024, в 13:49
25000 руб./за проект
Нужен сертифицированный специалист Oracle Certified Associate Linux 5
25 апр. 2024, в 13:49
250000 руб./за проект
Сверстать 3 страницы для WebApp и 1 Web
25 апр. 2024, в 13:36
2000 руб./за проект
Ещё заказы