如何在react js中处理CheckBox上的onClick事件

Question

我有一个名为 initialList 的数组，该数组包含三个项目，这些项目有自己的 checkboxes，当我检查任何项目时，我想将它们推入 list 数组，同时将它们从initialList数组，我不知道在clickHandler函数中要写什么以及如何渲染list数组

import React, { useState } from 'react'

function CheckBox3() {
    const initialList = [{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}]
    const [list, setList] = useState([])

    const clickhandler = () => {
       
    }
    
    return (
        <div>
            <ol>
                {initialList.map((item) => (
                    <li key={item.id}>{item.name}
                    <input type="checkbox" onClick={clickhandler} />
                    </li>))}
            </ol>
        </div>
    )
}

export default CheckBox3

Answer 1

早上好，尼尔。

if 复选框 - 只有 2 个可能的值 - 布尔值 false/true。 所以在这里使用否定是个好主意。

然后你使用 onChange 代替 onClick:

setChecked(!checked)}/>

---

我建议将实际复选框值保留在状态：

const [checked, setChecked] = useState()

此外，如果您有 x 个复选框 - 还需要保留复选框的哪个 id 处于哪个状态。 或者 - 只需将 checked 参数添加到您的initialList 对象中。

[
    {id:1 checked: false}
    {id:2 checked: true}
]

还有 - 对于标识符，您可以将 i 添加到地图函数中 - 并在检查函数中 - 反转 i - id 的值：

            {initialList.map((item, i) => (
                <li key={item.id}>{item.name}
                <input type="checkbox" onClick={(i) =>check(i)} />
                </li>))}

Answer 2

我建议您将列表保持在组件状态，每次单击项目时添加/更新选中的属性：

function CheckBox3() {
   const initialList = [{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}]
   const [list, setList] = useState(initialList);
    

   const clickhandler = ({target}) => {
       const {checked, id} = target;
       setList(prev => {
         const clickedItem = prev.find(item => item.id.toString() === id);
         clickedItem["checked"] = checked;
         return [...prev];
       });
    }
    
    return (
        <div>
            <ol>
                {initialList.map((item) => (
                    <li key={item.id}>{item.name}
                    <input type="checkbox" id={item.id} onClick={clickhandler} />
                    </li>))}
            </ol>
        </div>
    )
}

然后您可以过滤所选项目：

const selected = list.filter(item => item.checked);

Answer 3

这非常适合您想要实现的目标。

我所做的是检查复选框是否已选中，如果选中，则将其推送到

list

数组，并检查它的项目是否存在于

initialList

中，如果存在，则应将其过滤掉。

function CheckBox3() {

    const [initialList, setIinitialList] = useState([{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}])
    const [list, setList] = useState([])

    const clickHandler = (e, item) => {

        if (e.target.checked) {
            setList(prevState => [
                ...prevState,
                item
            ])
            const newInitialList = initialList.filter((list, index) => list.id !== item.id);
            setIinitialList(newInitialList)
        }
    }

    useEffect(() => {
        // Perform whatever you want to do when list changes here
        console.log(list);

    }, [list])

    return (
        <div>
            <ol>
                    {initialList.map((item) => (
                        <li key={item.id}>{item.name}
                        <input type="checkbox" onClick={(e) => clickHandler(e, item)} />
                    </li>))}
            </ol>
      </div>
    );
}