如何确定选中了哪个复选框？

Question

<table>
<tbody>
              <tr>  
                <th>Select</th>
                    <th>User Id</th>
                    <th>Id</th>
                    <th>Is Banned?</th>
                    <th>registration_date</th>
                
                </tr>
                {data.map((item, i) => (
                    <tr key={i}>
                        <td><input type="checkbox" checked={isChecked} /></td>
                        <td>{item.user_id}</td>
                        <td>{item.user_name}</td>
                        <td className="isbanned">{item.isbanned}</td>
                        <td>{item.registration_date}</td>
                    </tr>
                ))}
            </tbody></table>

这是我在上面看到的代码。我的问题是：

如何检测 user_id 1 个复选框已被选中？

我应该如何更改我的代码？或者我可以用什么？

Answer 1

你可以这样做

const data = [
  {
    user_id: "some-id",
    user_name: "Me",
    isbanned: "no",
    registration_date: "2000",
  },
]

function Whosebug() {
  const [selectedUserIds, setSelectedUserIds] = useState([])

  const addOrRemoveId = (id) => {
    setSelectedUserIds((state) => {
      if (state.includes(id)) {
        // If new id exists in current list then we remove it from state
        return selectedUserIds.filter((currentId) => currentId !== id)
      }
      // Else we add the item id to our state
      return [...state, id]
    })
  }
  return (
    <table>
      <tbody>
        <tr>
          <th>Select</th>
          <th>User Id</th>
          <th>Id</th>
          <th>Is Banned?</th>
          <th>registration_date</th>
        </tr>
        {data.map(({ user_id, ...item }) => (
          <tr key={user_id}>
            <td>
              <input
                checked={selectedUserIds.includes(user_id)}
                onChange={() => addOrRemoveId(user_id)}
                type="checkbox"
              />
            </td>
            <td>{user_id}</td>
            <td>{item.user_name}</td>
            <td className="isbanned">{item.isbanned}</td>
            <td>{item.registration_date}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

考虑：切勿使用索引或它们的组合字符串作为组件键。密钥应该是唯一的，如果您已经有一个 userId，则将其用作该密钥 id

如何确定选中了哪个复选框？

How can I determine which checkbox is checked?

javascript

reactjs