在 React 中调用参数作为状态

Question

我在 React 中有一个复选框，它调用一个以其状态作为参数的函数。

<p>
  <input
    type="checkbox"  
    name="hobbies"
    checked={this.state.All}
    onChange={this.checkHobbies.bind(this, "all")}
  />
  All Hobbies
</p>

我的违规代码在这里：

checkHobbies(name) {
  this.setState({
    name: !this.state.name,
  });
}

然而，

SetState 将名称解释为实际状态，而不是参数中传递的变量，在本例中是名为 "all" 的变量。我将如何使代码将函数解释为：

this.setState({
  all: !this.state.all
});

Answer 1

checkHobbies(name) {
  this.setState({
    [name]: !this.state[name],
  });
}

如果值作为 'all' 传递，则 seState 将被解释如下。

this.setState({
  all: !this.state.all
});

Answer 2

使用

checkHobbies(name) {
  this.setState({
    [name]: !this.state[name],
  });
}

在 React 中调用参数作为状态

Calling a Parameter as State in React

parameters

state

function

reactjs