[英]Select/Unselect All checkbox in reactJs
我正在尝试在 reactJs 中实现选择/取消选择所有功能,但无法实现。
我已经选择/取消选择所有主标题复选框功能,并且也可以选择或取消选择单个元素。
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Box extends Component{
constructor(props){
super(props);
this.state = {
allChecked: false,
list: [
{id:1, name: "item1", isChecked: false},
{id:2, name: "item2", isChecked: false},
{id:3, name: "item3", isChecked: false},
],
};
}
handleChange = (e) => {
let list = this.state.list;
let allChecked = this.state.allChecked;
if(e.target.value === "checkAll"){
list.forEach(item => {
item.isChecked = e.target.checked;
allChecked = e.target.checked;
});
}
else{
list.find( item => item.name === e.target.name).isChecked = e.target.checked;
}
this.setState({list:list, allChecked: allChecked});
}
renderList = () => {
return this.state.list.map(item =>
<div>
<input key={item.id} type="checkbox" name={item.name} value={item.name} checked={item.isChecked} onChange={this.handleChange} />
<label>{item.name}</label>
</div>
)
}
render(){
return(
<div>
<input type="checkbox"
value="checkAll"
checked={this.state.allChecked}
onChange={this.handleChange} />Check all
<br/>
{this.renderList()}
</div>
);
}
}
ReactDOM.render(<Box/>, document.getElementById('root'));
直截了当地说,我希望这种( https://jsfiddle.net/52uny55w/ )类型的功能使用普通的 Javascript 但由于某些原因不使用 jquery。
我已经在https://codesandbox.io/s/vvxpny4xq3解决了这个问题
handleChange = e => {
let itemName = e.target.name;
let checked = e.target.checked;
this.setState(prevState => {
let { list, allChecked } = prevState;
if (itemName === "checkAll") {
allChecked = checked;
list = list.map(item => ({ ...item, isChecked: checked }));
} else {
list = list.map(item =>
item.name === itemName ? { ...item, isChecked: checked } : item
);
allChecked = list.every(item => item.isChecked);
}
return { list, allChecked };
});
};
有几点需要注意。
1) 我已经更新了 checkAll 按钮以具有name
属性以确保一致性
2) 如果修改现有状态,使用新的函数语法
3) 解构对象,如果可能,不要在原地改变它们。 您可以使用map
而不是 forEach 并使用扩展运算符来修改对象而不发生变异。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.