推多个复选框数据在数组中的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/>

</>
);
}

我应该怎么做，以获得我的数据在数组在我的控制台?

sandbox: 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