如何抓取复选框并将它们置于状态?

Question

我的问题是：我有一个表，我在其中从数据库中的对象生成一行，其中包含一个人的姓名、详细信息和详细信息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>```

Answer 1

你可以有一个handleChange函数：

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

并在复选框上使用它(确保每个复选框的唯一名称(：

<input type="checkbox" 
...
name="Checkbox1"
onChange={this.handleCheckboxChange}
/>

用这样的东西初始化状态：

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;
}

Answer 2

您可以创建一个onChange事件处理程序并记录event.currentTarget.checked因为它将返回 true 或 false。我还建议在输入元素中添加某种标识符，以便您可以知道正在检查哪个元素，以便您可以正确跟踪它。

Answer 3

我做了类似的事情，用户选中一个框并更新状态。

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

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}
/>
//

Answer 4

这取决于你如何获取你渲染的数据，它是来自 props 还是从 api 获取，但一般来说，如果你有users数组，它可能看起来像这样：

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>
);
};