我想为我在 map
函数中创建的每个复选框设置 onChange
事件。
不幸的是,如果我点击一个复选框,我得到了正确的目标 id,但所有的复选框都是切换的,而不是被点击的那个。
那么我该如何处理呢?
constructor(props) {
super(props);
this.state = {
user: [],
checked: ''
}
this.handeClick = this.handeClick.bind(this);
}
handeClick(e) {
console.log("Wurde geklickt: " + e.target.id);
const item = e.target.name;
const isChecked = e.target.checked;
this.setState({ checked: isChecked });
}
[...]
render() {
return (
<>
<Container fluid className="con">
<Row className="justify-content-md-center">
{
this.state.user.map(user => {
return (
<Col md="3" key={user.SD_Emplid}>
<div className="card">
{user.SD_Anrede} <h2>{user.SD_Vorname}</h2> <h4>{user.SD_Vorname}</h4>
<hr></hr>
<Form.Check
onChange={this.handeClick}
checked={this.state.checked}
className="checkBoxCard"
type="switch"
id={user.SD_Emplid}
label=""
/>
</div>
</Col>
)
})
}
</Row>
</Container>
</>
)
}
}
最佳答案
您需要为每个用户id
存储checked
状态。一个可能的解决方案是使用 object
,其中 keys
是 user ids
,值是选中的状态。如果 key
不存在,这等同于unchecked:
handeClick(e) {
console.log("Wurde geklickt: " + e.target.id);
const item = e.target.name;
const isChecked = e.target.checked;
this.setState(
({checked}) => ({
checked: {
...checked,
[e.target.id]: isChecked,
}
})
);
}
然后您可以从以下状态设置复选框的checked
状态:
{this.state.user.map(user => (
<Col md="3" key={user.SD_Emplid}>
<div className="card">
{user.SD_Anrede}
<h2>{user.SD_Vorname}</h2>
<h4>{user.SD_Vorname}</h4>
<hr></hr>
<Form.Check
onChange={this.handeClick}
checked={!!this.state.checked[user.SD_Emplid]}
className="checkBoxCard"
type="switch"
id={user.SD_Emplid}
label=""
/>
</div>
</Col>
)}
确保将您的checked
状态初始化为一个对象:
this.state = {
user: [],
checked: {},
}
关于javascript - 我如何使用 React-Bootstrap 的 React for Switch Buttons 在 map 中设置 onchange?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59158994/