[英]How to check Checkbox checked in the table or not
I am new to the reactjs.我是 reactjs 的新手。 Here I have a component which is rendering a table.
这里我有一个渲染表格的组件。 In this there are two tables that are getting rendered with different data, but using the same component, i am passing data with some props.
在此有两个表使用不同的数据呈现,但使用相同的组件,我正在使用一些道具传递数据。 Now, In this i have a checkbox for both the tables.
现在,在这个我有两个表的复选框。 Now, if user selects from first and also check from the second, and so, i want to know that weather user has selected from the one table or checked from two tables.
现在,如果用户从第一个选择并从第二个检查,所以,我想知道天气用户是从一个表中选择还是从两个表中检查。
<td align="center" className="checkbox">
<input type="checkbox" name={item.resumeId} checked={!!props.parentState[item.resumeId]} onChange={(e) => { props.handleTableCheckboxChange(e, props.type, props.tableName) }} />
<a href="#" data-toggle="tooltip" title="Recommendation" onClick={(e) => { props.getReason(e, item.jdId, item.resumeId, item.resumeName) }}><i className="fa fa-info-circle info-icon" style={props.infoIcon} aria-hidden="true"></i></a>
</td>
So, this is the td in which I am having the checkbox.所以,这是我有复选框的 td。
handleTableCheckboxChange = (e, type, selectedType) => {
this.setState({
[e.target.name]: e.target.checked
}, () => {
const checkedItems = this.props[type].content.filter((item) => this.state[item.resumeId])
this.setState({
isCheckd: checkedItems.length === this.props[type].length ? true : false,
isEnable: checkedItems.length > 1 ? true : false,
isMultipleCheck: checkedItems.length > 1 ? true : false,
movetype: type === "tracked" ? "Shortlist" : "Longlist"
});
});
}
Here, I am handling the checkbox event which is onClick of the checkbox.在这里,我正在处理复选框的 onClick 事件。 Here type is from which user has selected like, is it tracked or untracked section.
这里的类型是用户选择的类型,是跟踪还是未跟踪的部分。
What I have tried is ,我试过的是,
this.state = { typeAdded: [] }
created a state variable as an empty array and then whenever we add any thing then this will add the what type got checked.创建一个状态变量作为一个空数组,然后每当我们添加任何东西时,这将添加检查的类型。 Now, here If I console it then the when first time value is not getting added in this array,
现在,在这里如果我安慰它,那么第一次值没有被添加到这个数组中,
this.setState(prevState => ({
typeAdded: [...prevState.typeAdded, type]
}))
So, is there any way through which I will come to know that user has checked some values from both of the tables .Thanks那么,有什么方法可以让我知道用户已经检查了两个表中的一些值。谢谢
The way I am trying is ,我正在尝试的方式是,
this.state = {
selectedType: {}
}
if (e.currentTarget.checked) {
this.setState({
selectedType: {
...this.state.selectedType,
[resumeId]: type
}
}) else {
//remove the property from that array
}
Here, I am confused in how to remove the property from that object without mutating the state在这里,我对如何在不改变状态的情况下从该对象中删除属性感到困惑
Shoube be used currentTarget.checked
to checked status.应该使用
currentTarget.checked
来检查状态。
handleTableCheckboxChange = (event, type, selectedType)=>{
event.stopPropagation();
console.log(event.currentTarget.checked); // will be true / false based on checked selection.
//..... rest of the code.
//create on hash object keeping the track of selected checkbox o respected table //在散列对象上创建跟踪选定的复选框o受尊重的表
if(this.tableSelection[selectedType]){
//checkbox selected from respected table
}else{
// not selected
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.