在 ReactJs 中将多个复选框数据推送到数组中？

Question

我需要从复选框值中以数组形式推送数据。

代码

import React,{ useState,useEffect } from "react";

export default function App() {

  const [person, setPerson] = useState([]);

  const CheckHandler = () => {
  //  setPerson(() => {     ...person, }) 

  }

  useEffect(() => {
  //Print data each time the checkbox is "checked" or "unchecked"
    console.log(person);
  }, [person]);


  return (
    <>
    <input type="checkbox" id="jane" name="jane" value="jane" onClick={() => CheckHandler()} />
    <label htmlFor="jane">jane</label><br/>

    <input type="checkbox" id="Mike" name="Mike" value="Mike" onClick={() => CheckHandler()} />
    <label htmlFor="Mike">Mike</label><br/>

    <input type="checkbox" id="board" name="board" value="board" onClick={() => CheckHandler()} />
    <label htmlFor="board">board</label><br/>
    
    </>
  );
}

我应该怎么做才能在我的控制台中获取数组中的数据？

沙盒：https://codesandbox.io/s/adoring-rgb-27wkt

Answer 1

你想要这样吗，我还添加了添加和删除过滤器

const CheckHandler = (e) => {
  const value = e.target.value;
  setPerson((prev) =>
    person.includes(value)
      ? prev.filter((cur) => cur !== value)
      : [...prev, e.target.value]
  );
};

完整代码

import React, { Fragment, useState, useEffect } from "react";

export default function App() {
  const [person, setPerson] = useState([]);

  const CheckHandler = (e) => {
    setPerson((prev) => [...prev, e.target.value]);
  };

  useEffect(() => {
    //Print data each time the checkbox is "checked" or "unchecked"
    console.log(person);
  }, [person]);

  return (
    <Fragment>
      <input
        type="checkbox"
        id="jane"
        name="jane"
        value="jane"
        onClick={CheckHandler}
      />
      <label htmlFor="jane">jane</label>
      <br />

      <input
        type="checkbox"
        id="Mike"
        name="Mike"
        value="Mike"
        onClick={CheckHandler}
      />
      <label htmlFor="Mike">Mike</label>
      <br />

      <input
        type="checkbox"
        id="board"
        name="board"
        value="board"
        onClick={CheckHandler}
      />
      <label htmlFor="board">board</label>
      <br />
    </Fragment>
  );
}

Codesandbox：https://codesandbox.io/s/twilight-hill-lh9bv?file=/src/App.js:0-986

在 ReactJs 中将多个复选框数据推送到数组中？

Push Multiple checkbox data in array in ReactJs?

javascript

arrays

checkbox

reactjs

use-state