Как можно доставать value из checkbox в React?

Question

Я не знаю на сколько правильно мое решение, но оно вот

    let [check, setChecked] = useState([])
    const checkClick = (e) => {
        if(e.target.checked){
            setChecked([...check, e.target.value])
        } else {
            let w = e.target.value
            setChecked(check.filter((word) => word !== w))
            console.log(w)
        }


    }

Существует ли лучше?

Answer 1

Если нужно просто добавить несколько чекбоксов в форму:

Создаем и переиспользуем компонент Checkbox.jsx

import React from "react";
import "./styles.css";

export const Checkbox = ({ isChecked, onChange, children }) => {
  return (
    <label className="checkbox-wrapper">
      <input
        type="checkbox"
        className="checkbox-element"
        checked={isChecked}
        onChange={() => onChange((prev) => !prev)}
      />
      <p>{children}</p>
    </label>
  );
};

Добавляем несколько компонентов Checkbox в форму.

import React, { useState } from "react";
import { Checkbox } from "./components/Checkbox/Checkbox";

function App() {
  const [rulesChecked, setRulesChecked] = useState(false);
  const [mailChecked, setMailChecked] = useState(false);

  return (
    <section>
      <form className="form">
        <Checkbox isChecked={rulesChecked} onChange={setRulesChecked}>
          Принимаю правила участия в акции
        </Checkbox>
        <Checkbox isChecked={mailChecked} onChange={setMailChecked}>
          Соглашаюсь на рассылку новостей
        </Checkbox>
        <button type="submit">Отправить</button>
      </form>
    </section>
  );
}

В этом примере у каждого чекбокса свое состояние.

Если нужно создать много чекбоксов, например 50, могу предложить такой вариант:

import React, { useState } from "react";

export default function App() {
  const osList = [
    {
      id: 1,
      name: "Windows",
      checked: false,
    },
    {
      id: 2,
      name: "Debian",
      checked: false,
    },
    {
      id: 3,
      name: "Ubuntu",
      checked: false,
    },
    {
      id: 4,
      name: "Mac",
      checked: false,
    },
    {
      id: 5,
      name: "Android",
      checked: false,
    },
    {
      id: 6,
      name: "iOS",
      checked: false,
    },
  ];

  const [state, setState] = useState(osList);

  const handler = (event) => {
    const id = event.target.id;
    setState((prev) => {
      return prev.map((os) => {
        return {
          id: os.id,
          name: os.name,
          checked: id == os.id ? !os.checked : os.checked,
        };
      });
    });
  };

  console.log(state);

  return (
    <>
      {state.map((os) => (
        <label key={os.id}>
          <input
            id={os.id}
            type="checkbox"
            checked={os.checked}
            onChange={handler}
          />
          <p>{os.name}</p>
        </label>
      ))}
    </>
  );
}

Все данные чекбоксов хранятся в виде массива объектов в состоянии state, при каждом клике по любому из чекбоксов, меняем его значение checked на противоположное и обновляем состояние state. Решение получилось громоздкое, тут главное принцип а не красота кода, так что сильно не пинайте :)

Первое решение брал здесь, второе набросал из головы исходя из техзадания.

БЛОГ НА HUSL

Как можно доставать value из checkbox в React?

Ответы (1 шт):