如何在反应中选中/取消选中复选框列表
[英] How to check/uncheck a list of checkboxes in react
本文介绍了如何在反应中选中/取消选中复选框列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 room 页面，在该页面中我有一个附加到该房间的传感器列表，可以使用复选框选择这些传感器，如下所示:
{sensors.map(s => {返回 (<div className="checkboxElementWrapper" key={s.id}><label htmlFor={`sensor${s.id}`}><div className="checkboxLabel"><Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
<输入类型=复选框"id={`传感器${s.id}`}名称=传感器ID"值={s.id}选中={s.roomId === values.id}onChange={handleCheckbox}/><span className="checkbox"/>
);})}
问题是 - 这种方法禁止我取消选中复选框(所以如果在数据库中该传感器连接到那个房间 - 就是这样).我如何重写它以便我可以选中/取消选中此复选框?
解决方案
在类中你必须有状态，
样本有点像这样
导出默认类 yourComponent extends React.Component {状态 = {复选框:[]}handleCheckbox = (e, s) =>{const checkedBoxes = [...this.state.checkedBoxes];如果(e.target.checked){checkBoxes.push(s)} 别的 {const index = checkedBoxes.findIndex((ch) => ch.roomId === s.roomId);checkBoxes.splice(index, 1);}this.setState({checkedBoxes});}使成为() {返回(<div className="checkboxRowContent">{sensors.map(s => {返回 (<div className="checkboxElementWrapper" key={s.id}><label htmlFor={`sensor${s.id}`}><div className="checkboxLabel"><Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
<输入类型=复选框"id={`传感器${s.id}`}名称=传感器ID"选中={checkedBoxes.find((ch) => ch.roomId === s.roomId)}onChange={(e) =>handleCheckbox(e, s)}/><span className="checkbox"/>
);})}
)}}
一个状态，checkedBoxes 用于获取所有选中的复选框.
处理复选框点击的处理程序handleCheckbox，
I have a room page and in that page I have a list of sensors attached to that room, those sensors can be selected using a checkbox, like so:
<div className="checkboxRowContent">
{sensors.map(s => {
return (
<div className="checkboxElementWrapper" key={s.id}>
<label htmlFor={`sensor${s.id}`}>
<div className="checkboxLabel">
<Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
</div>
<input
type="checkbox"
id={`sensor${s.id}`}
name="sensorId"
value={s.id}
checked={s.roomId === values.id}
onChange={handleCheckbox}
/>
<span className="checkbox" />
</label>
</div>
);
})}
</div>
the problem is - this approach prohibits me from unchecking the checkbox (so if in db that sensor is attached to that room - that's it). How could I rewrite this so that I can check/uncheck this checkbox?
解决方案
in the class you must have state for that,
a sample would be somewhat like this
export default class yourComponent extends React.Component {
state = {
checkedBoxes: []
}
handleCheckbox = (e, s) => {
const checkedBoxes = [...this.state.checkedBoxes];
if(e.target.checked) {
checkedBoxes.push(s)
} else {
const index = checkedBoxes.findIndex((ch) => ch.roomId === s.roomId);
checkedBoxes.splice(index, 1);
}
this.setState({checkedBoxes});
}
render() {
return(
<div className="checkboxRowContent">
{sensors.map(s => {
return (
<div className="checkboxElementWrapper" key={s.id}>
<label htmlFor={`sensor${s.id}`}>
<div className="checkboxLabel">
<Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
</div>
<input
type="checkbox"
id={`sensor${s.id}`}
name="sensorId"
checked={checkedBoxes.find((ch) => ch.roomId === s.roomId)}
onChange={(e) => handleCheckbox(e, s)}
/>
<span className="checkbox" />
</label>
</div>
);
})}
</div>
)
}
}
A state, checkedBoxes for getting all selected checkboxes.
A handler handleCheckbox for handling checkbox clicks,
这篇关于如何在反应中选中/取消选中复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
