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

Как правильно изменять 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);


в принципе я не вижу разницы но просто хотел услышать другое мнение. Может что-нибудь я не знаю
  • Вопрос задан
  • 291 просмотр
Решения вопроса 2
Самый лучший вариант - не использовать стейт. Вообще. Зачем он для чекбоксов? Это настолько раздуто и избыточно в 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);
}, []);

Ну и неконтролируемые компоненты, упомянутые Алексей Николаев, в ряде кейсов могут быть очень удобны.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
locky_yotun
@locky_yotun
Я видел некоторый джаваскрипт
Первый определенно лучше, хотя бы потому что анонимные функции в JSX — это моветон (плохо читается, ф-ии пересоздается при каждом рендере).
А вообще, конечно, если вы реально делаете свой компонент для чекбокса — он не должен хранить свое состояние в своем же стейте, а должен принимать его "сверху" через пропсы.
То есть на мой взгляд лучшим был бы третий вариант, вот такой:
class Checkbox extends React.PureComponent {
  handleChange = (event) => {
    const { target: { checked } } = event;
    const { name, onChange } = this.props;

    onChange({
      name,
      value: checked,
      event,
    });
  };

  render() {
    const { name, label, value } = this.props;
    return (
      <label>
        <span>{ label }</span>
        <input
          type="checkbox"
          name={name}
          checked={value}
          value="1"
          onChange={this.handleChange}
        />
      </label>
    );
  }
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы