Reactjs 如何抓取复选框并将其置于状态？

我的问题如下：我有一个表，其中我从数据库中的一个对象生成一行，其中包含一个人的姓名、详细信息和详细信息2。每个人旁边都有一个复选框。我需要将那些处于检查状态的对象放入一个状态的对象中，并在未选中时将其从该对象中删除，因为我将在提交时将此对象发送到服务器

如何以及最好的方法是什么

我试过使用current.value，但我在兜圈子，我认为我没有正确的想法

    <tr>
        <td>
            <table >
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <input type="checkbox"/>
                                <label>
                                    data 1
                                </label>
                            </div>
                        </td>
                        <td data-title="Column 2">
                            data 2
                        </td>
                        <td >
                            <a href="#">
                                Edit
                            </a>
                            <a href="#"></a>
                                Delete
                            </a>
                        </td>
                        <td data-title="Column 5">
                            data 3
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>```

数据1
数据2
删除
数据3
```

您可以创建一个

onChange

事件处理程序，并记录

事件.currentTarget.checked

，因为它将返回true或false。我还建议在输入元素中添加某种标识符，这样您就可以知道选中了哪个元素，这样您就可以正确地跟踪它。

我做过类似的操作，用户选中一个框，它会更新状态

您将需要复选框的事件处理程序，以及componentDidUpdate，以查看复选框值是否已更改

componentDidUpdate(prevProps, prevState) {
  const { CHECKBOX_NAME } = this.state;
  if (CHECKBOX_NAME !== prevState.CHECKBOX_NAME) {
    if (CHECKBOX_NAME === true) {
      this.setState({
        // do whatever
      });
    } else {
      this.setState({
        // change back if necessary
      });
    }
  }
}

handleCheckboxChange = event => {
  const { checked } = event.target;
  this.setState({
    // mark box as checked in state
  });
};

...

// checkbox
<input type="checkbox" 
  checked={this.state.CHECKBOX_NAME}
  onChange={this.handleCheckboxChange}
/>

//

componentDidUpdate（prevProps，prevState）{
const{CHECKBOX_NAME}=this.state；
如果（复选框名称！==prevState.CHECKBOX名称）{
如果（复选框_NAME==true）{
这是我的国家({
//做任何事
});
}否则{
这是我的国家({
//如有必要，请调回
});
}
}
}
handleCheckboxChange=事件=>{
const{checked}=event.target；
这是我的国家({
//将框标记为签入状态
});
};
...
//复选框
//

这取决于您如何获取呈现的数据，它是来自道具还是来自api，但通常情况下，如果您有

用户

数组，它可能看起来像这样：

const UserList = props => {
  const [selectedUsers, setSelectedUsers] = useState([]);

  // Your user data here
  const userData = [
    {
      id: "1",
      name: "User1",
      details: {
        /*details here */
      }
    }
  ];

  // Check if user is selected
  const isUserSelected = user => !!selectedUsers.find(u => u.id === user.id);

  // Add user to selected or remove if already there
  const selectUser = user => {
    setSelectedUsers(users => {
      if (isUserSelected(user)) {
        return users.filter(u => u.id !== user.id);
      }
      return [...users, user];
    });
  };

  return (
    <table>
      <tbody>
        {userData.map(user => (
          <tr key={user.id}>
            <td>
              <label htmlFor={`user_${user.id}`}>{user.name}</label>
              <input
                id={`user_${user.id}`}
                type="checkbox"
                checked={isUserSelected(user)}
                onChange={() => selectUser(user)}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

this.setState({
     value: {},
});

value = {
    Checkbox1: true,
    Checkbox2: false,
    ...
}

constuserlist=props=>{
常量[selectedUsers，setSelectedUsers]=useState（[]）；
//您的用户数据在这里
常量用户数据=[
{
id:“1”，
名称：“User1”，
详情：{
/*这里的细节*/
}
}
];
//检查是否选择了用户
const isUserSelected=user=>selectedUsers.find（u=>u.id==user.id）；
//将用户添加到选定对象或删除（如果已存在）
const selectUser=user=>{
设置选定用户（用户=>{
如果（isUserSelected（用户））{
返回users.filter（u=>u.id！==user.id）；
}
返回[…用户，用户]；
});
};
返回(
{userData.map（用户=>(
{user.name}
选择用户（用户）}
/>
))}
);
};

您可以使用手柄更改功能：

handleChange = ({ target }) => {
this.setState(prevState => ({
  value: {
    ...prevState.value,
    [target.name]: target.value
  },
}));

并在复选框上使用它（确保每个复选框的名称都是唯一的）：

现在，在objectvalue中，您有所有这些复选框的值，该对象如下所示：

const UserList = props => {
  const [selectedUsers, setSelectedUsers] = useState([]);

  // Your user data here
  const userData = [
    {
      id: "1",
      name: "User1",
      details: {
        /*details here */
      }
    }
  ];

  // Check if user is selected
  const isUserSelected = user => !!selectedUsers.find(u => u.id === user.id);

  // Add user to selected or remove if already there
  const selectUser = user => {
    setSelectedUsers(users => {
      if (isUserSelected(user)) {
        return users.filter(u => u.id !== user.id);
      }
      return [...users, user];
    });
  };

  return (
    <table>
      <tbody>
        {userData.map(user => (
          <tr key={user.id}>
            <td>
              <label htmlFor={`user_${user.id}`}>{user.name}</label>
              <input
                id={`user_${user.id}`}
                type="checkbox"
                checked={isUserSelected(user)}
                onChange={() => selectUser(user)}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

this.setState({
     value: {},
});

value = {
    Checkbox1: true,
    Checkbox2: false,
    ...
}

如果未选中它们，您会提到将它们从状态中删除。我建议过滤：

const { value } = this.state;
const trueCheckboxesKeys = value.keys().filter(valueKey => value[valueKey]);
let trueCheckboxes = {};
for(i = 0; i < trueCheckboxesKeys.Length; i++) {
    trueCheckboxes[trueCheckboxesKeys[i]] = true;
}

const{value}=this.state；
const trueCheckboxesKeys=value.keys（）.filter（valueKey=>value[valueKey]）；
让TrueCheckbox={}；
对于（i=0；i