使用Onclick修改React中的状态

Question

我对React很陌生，只是想制作一个简单的程序，它有多个按钮，对应于状态中的某个值，我想要的是当按下一个按钮时，相应的值否定

class Parent extends React.Component{
constructor(props){
super(props);

this.state={
a: true,
b: false,
c: true,
d: false
}
this.handleAction = this.handleAction.bind(this);
}
handleAction(action) {
this.setState({
name: !this.state.name
});
}
render(){
return(
<div>
<Child onAction={this.handleAction} name='a'/>
<Child onAction={this.handleAction} name='b'/>
<Child onAction={this.handleAction} name='c'/>
<Child onAction={this.handleAction} name='d'/>
</div>
)
}
}
function Child({onAction, name}){
return (
<button onClick={onAction}>
{name}
</button>
);
}

有没有一种方法可以在没有4个单独的handleAction函数的情况下做到这一点？我试着把name传给onAction，但那会抛出Error: Maximum update depth exceeded

我知道一定有什么很明显的东西我错过了，谢谢你的帮助。

Answer 1

您可以将name作为参数传递给handleAction函数

....
handleAction(name) {
this.setState( state => ({ [name]: !state[name] }) );
}
render(){
return(
<div>
<Child onAction={() => this.handleAction('a')} name='a'/>
<Child onAction={() => this.handleAction('b')} name='b'/>
<Child onAction={() => this.handleAction('c')} name='c'/>
<Child onAction={() => this.handleAction('d')} name='d'/>
</div>
)
}
...

请注意，在this.setState中阅读this.state并不是一种好的做法。参见此处

Answer 2

更改处理程序，使其可以接受名称并返回另一个函数。

handleAction(name) {
return () => {
this.setState({
[name]: !this.state[name],
});
};
}

在子组件中，传递该子的名称

<Child onAction={this.handleAction("a")} name='a'/>

Answer 3

试试这个：

class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
a: true,
b: false,
c: true,
d: false,
};
this.handleAction = this.handleAction.bind(this);
}
handleAction(name) {
return () => {
console.log("name", name);
this.setState({
[name]: !this.state[name],
});
};
}
render() {
console.log("this.state", this.state);
return (
<div>
<Child onAction={this.handleAction} name="a" />
<Child onAction={this.handleAction} name="b" />
<Child onAction={this.handleAction} name="c" />
<Child onAction={this.handleAction} name="d" />
</div>
);
}
}
function Child({ onAction, name }) {
return <button onClick={onAction(name)}>{name}</button>;
}

Answer 4

正如我所看到的，您希望使用按钮的名称，然后用相同的名称更改状态。首先，您应该为函数提供按钮的名称。默认情况下，当事件被传递给函数时，您可以获得如下名称：

event.target.innerText

然后，如果使用名称作为包含值的变量，则必须使用[名称]表示法。否则，它会将"name"属性添加到对象中。因此，您的处理程序应该如下所示：

handleAction(e) {
const name = e.target.innerText
this.setState({
[name]: !this.state[name]
});
}