React.js-控制多个复选框 [英] Reactjs - Controlling Multiple Checkboxes
问题描述
我在Reactjs中构建一个CheckAllBoxes组件。我有一个项目列表
Im building a CheckAllBoxes component in Reactjs. I have a list of items
fruits = {orange, apple, grape}
常规< SelectBox />
组件来显示和切换HTML复选框
A general <SelectBox />
component to display and toggle the HTML checkbox
我需要构建一个< Fruits />
组件以列出所有水果,并且每个项目都有自己的< SelectBox />
I need to build a <Fruits />
component to list all the fruits and each of item has its own <SelectBox />
然后我需要构建一个< SelectAll /> ;
组件,该组件具有< SelectBox />
,并且在选中该组件时,它将切换所有< CheckBox />
of < Fruits />
Then I need to build a <SelectAll />
component which has a <SelectBox />
and when it is checked, it will toggle all the <CheckBox />
of <Fruits />
如果有任何水果再次取消选中,则< SelectAll />
也应该也取消选中。
If any fruit is unchecked again, then the <SelectAll />
should be unchecked too.
结果应类似于
如何获取< SelectAll />
来控制其他复选框?
How can I get the <SelectAll />
to control other checkboxes ?
推荐答案
以下是有关如何实现的简单示例:
Here is the quick example on how you could do it:
import React, { Component } from 'react';
export default class SelectBox extends Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
this.state = {
allChecked: false,
checkedCount: 0,
options: [
{ value: 'selectAll', text: 'Select All' },
{ value: 'orange', text: 'Orange' },
{ value: 'apple', text: 'Apple' },
{ value: 'grape', text: 'Grape' }
]
};
}
handleClick(e) {
let clickedValue = e.target.value;
if (clickedValue === 'selectAll' && this.refs.selectAll.getDOMNode().checked) {
for (let i = 1; i < this.state.options.length; i++) {
let value = this.state.options[i].value;
this.refs[value].getDOMNode().checked = true;
}
this.setState({
checkedCount: this.state.options.length - 1
});
} else if (clickedValue === 'selectAll' && !this.refs.selectAll.getDOMNode().checked) {
for (let i = 1; i < this.state.options.length; i++) {
let value = this.state.options[i].value;
this.refs[value].getDOMNode().checked = false;
}
this.setState({
checkedCount: 0
});
}
if (clickedValue !== 'selectAll' && this.refs[clickedValue].getDOMNode().checked) {
this.setState({
checkedCount: this.state.checkedCount + 1
});
} else if (clickedValue !== 'selectAll' && !this.refs[clickedValue].getDOMNode().checked) {
this.setState({
checkedCount: this.state.checkedCount - 1
});
}
}
render() {
console.log('Selected boxes: ', this.state.checkedCount);
const options = this.state.options.map(option => {
return (
<input onClick={this.handleClick} type='checkbox' name={option.value} key={option.value}
value={option.value} ref={option.value} > {option.text} </input>
);
});
return (
<div className='SelectBox'>
<form>
{options}
</form>
</div>
);
}
}
对于ES6示例,我们深感抱歉。当我有更多时间时,将添加ES5示例,但是我认为您可以了解如何做。
另外,您当然想将其分解为2个部分。然后,您只需将您的选择作为道具传递给Child组件即可。
I'm sorry for the ES6 example. Will add ES5 example when I find more time, but I think you can get the idea on how to do it. Also you definitely want to break this down into 2 components. Then you would just pass your options as props to the Child component.
这篇关于React.js-控制多个复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!