我是新手做出反应并尝试实现某些目标,但却不知道如何让它发挥作用。这是我的代码:
import React from "react";
import CheckBox from "./CheckBox";
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onSelect= this.onSelect.bind(this);
};
onSelect(selected) {
//change props only for the clicked checkbox and update state
}
render(){
return (<div>
<CheckBox
label="Label"
count="60"
stateGroup="department"
ticked={false}
onClick = {this.onSelect}
/>
<CheckBox
label="Label"
count="60"
stateGroup="language"
ticked={false}
onClick = {this.onSelect}
/>
</div>)
}
}
所以,我有容器“MainContainer”里面有“CheckBox”组件,我想把我的状态保持在一个地方“MainContainer”状态。我正在尝试做的是onSelect我会更新状态以及仅更改所选组件的道具,但我不知道如何在onSelect函数中访问该组件。如果我可以直接更改组件的道具,我就不会这样做。
谢谢。
答案 0 :(得分:1)
从您的描述中,您似乎希望能够选择而无需将每个复选框的映射存储在状态中。您可以做的是,如果您希望能够选择多个复选框,请在状态数组中保留所选项目的数组。
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.state = { selectedValues: []};
this.onSelect= this.onSelect.bind(this);
};
onSelect(selected, checked) {
//change props only for the clicked checkbox and update state
if(checked) {
//if the checkbox is check append id to the selected state array
this.setState((prevState) => ({
selectedValues: prevState.selectedValues.concat(selected);
}))
} else {
//remove the value from state is its unchecked
let selectedValues = [...this.state.selectedValues];
const index = selectedValues.indexOf(selected);
if(index > -1) {
selectedValues = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
}
this.setState({selectedValues});
}
}
render(){
return (<div>
<CheckBox
label="Label"
count="60"
stateGroup="department"
ticked={this.state.selectedValues.indexOf("department") > -1}
onClick = {this.onSelect}
/>
<CheckBox
label="Label"
count="60"
stateGroup="language"
ticked={this.state.selectedValues.indexOf("language") > -1}
onClick = {this.onSelect}
/>
</div>)
}
}
然后你可以从像
这样的孩子调用onSelect函数this.props.onClick(this.props.stateGroup, checkedState);
如果您希望一次只选择一个Checkbox
,则应该改为使用Radio
。但是,在这种情况下,您的任务更加简单,因为您只需要将selectedValue
存储为字符串而不是数组
答案 1 :(得分:0)
首先,您需要设置初始状态,然后在按钮单击时更改该状态。
import React from "react";
import CheckBox from "./CheckBox";
class MainContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
};
this.onSelect= this.onSelect.bind(this);
};
onSelect(selected) {
this.setState({checked: selected}) // or maybe: selected.target.value
}
render(){
return (
<div>
<CheckBox
label="Label"
count="60"
stateGroup="department"
ticked={false}
onClick = {this.onSelect}
/>
<CheckBox
label="Label"
count="60"
stateGroup="language"
ticked={false}
onClick = {this.onSelect}
/>
</div>)
}
}