如何從映射的多個復選框中選擇一個復選框 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]));
};