如何从映射的多个复选框中选择一个复选框 React.js

Question

我映射了一个对象列表来呈现表格行。 每个表格行都有input type复选框。

const [ isChecked, setIsChecked ] = useState(false);

    const handleChange = (e) => {
        setIsChecked(e.target.checked)
    };

    const tableRow = clonedUsers.map((user, index) => {
        return (
            <tr key={index}>
                <td className='spacer-left' />
                <td className='checkbox'>
                    <div className='pretty p-svg p-curve'>
                        <input type='checkbox' onChange={handleChange} checked={isChecked} />
                        <div className='state p-primary'>
                            <svg className='svg svg-icon' viewBox='0 0 20 20'>
                                <path
                                    d='M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z'
                                    style={{ stroke: 'white', fill: 'white' }}
                                />
                            </svg>
                            <label />
                        </div>
                    </div>
                </td>
                <td className='team-name'>{user.name}</td>
                <td className='team-lead-name d-none d-xl-flex'>{user.position}</td>
                <td className='team-index  d-none d-md-flex'>{user.email}</td>
                <td className='team-lead-rating'>
                    <Link to='/people-settings'>Edit team</Link>
                </td>
                <td className='team-lead-rating'>
                    <Link to='/people-settings'>Deactivate user</Link>
                </td>
            </tr>
        );
    });

当我单击任何复选框时，它会将所有复选框都标记为已选中。 我在这里做错了什么？ 有没有更好的方法来实现这个？

Answer 1

我在这里做错了什么？

问题是所有复选框只有一种状态。

有没有更好的方法来实现这个？

您可以使用列表或对象来存储每个复选框的状态。

但是为了快速查找，我将使用具有以下结构的对象：

{ [name]: <checkbox value> }

const [checked, setChecked] = useState({});

const handleChange = (e, name) => {
  setChecked({
    ...checked,
    [name]: e.target.checked
  })
};

<input type='checkbox'
  onChange={(e) => handleChange(e, user.name)}
  checked={checked[user.name]}
/>

Answer 2

您必须将checkbox提取到一个单独的组件，或者我会说您需要创建一个单独的组件来为其使用本地状态：

export default const Checkbox = props => {

    const [isChecked, setIsChecked] = useState(false);

    const handleChange = e => {
       setIsChecked(!isChecked);
    }

    return (
       <input type='checkbox' onChange={handleChange} checked={isChecked} />
    );
} 

现在你可以使用这个：

<div className='pretty p-svg p-curve'>
    <Checkbox />

Answer 3

我会将已检查的 ID 保持在状态，例如：

const [checked, setChecked] = useState([]);

const handleChange = id => () => {
  setChecked(prev => {
    if (prev.includes(id)) {
      return prev.filter(x => x !== id);
    } else {
      return [...prev, id];
    }
  });
};

然后在我的输入中：

<input
  type='checkbox'
  onChange={handleChange(user.id)}
  checked={checked.includes(user.id)}
/>

编写处理程序的一种更lodash方法是使用lodash使用xor 。

import xor from 'lodash/xor';

///
const handleChange = id => () => {
  setChecked(prev => xor(prev, [id]));
};