Question

我一直在尝试使用动态键值对来切换状态，但它似乎不会发生。

这是州：

constructor(props) {
  super(props);
  this.state = {
    firecrackerAnimation: false,
    mainImageBounceAnimation: false,
    flowersFallingAnimation: false,
  };
}

这是我用来切换状态的代码

changeAnimation = e => {
   this.setState(
    {
      [e.target.value]: !(this.state[event.target.value]),
    },
    () => {
      console.log(this.state);
    }
);

以下是我在render（）

中使用它的地方

<div className="form-row">
        <span className="form-label">Animations</span>
        <input
          className=""
          type="checkbox"
          value="firecrackerAnimation"
          onClick={this.changeAnimation}
          checked={this.state.firecrackerAnimation}
        />{" "}
        Fire Cracker Animation <br />
        <input
          className=""
          type="checkbox"
          value="mainImageBounceAnimation"
          onChange={this.changeAnimation}
          checked={this.state.mainImageBounceAnimation}
        />{" "}
        Main Image Bounce <br />
        <input
          className=""
          type="checkbox"
          value="flowersFallingAnimation"
          onChange={this.changeAnimation}
          checked={this.state.flowersFallingAnimation}
        />{" "}
        Flowers Falling Animation <br />
</div>

Answer 1

更改changeAnimation功能，如下所示：

changeAnimation(e){
      var value = e.target.value;
      this.setState({[value]: !(this.state[value])});    
}

Here is the fiddle.

Answer 2

我指出了几个错误：

您应该使用e.target.name来获取被点击的checkbox的名称。
您必须为复选框提供name，而不是value

工作演示

＆＃13;

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      firecrackerAnimation: false,
      mainImageBounceAnimation: false,
      flowersFallingAnimation: false,
    };
  }

  changeAnimation = (e) => {
    this.setState(
      {
        [e.target.name]: !(this.state[e.target.name]),
      },
      () => {
        console.log(this.state);
      })
  }

  render() {
    return (
      <div className="form-row">
        <span className="form-label">Animations</span>
        <input
          className=""
          type="checkbox"
          name="firecrackerAnimation"
          onChange={this.changeAnimation}
          checked={this.state.firecrackerAnimation}
        />{" "}
        Fire Cracker Animation <br />
        <input
          className=""
          type="checkbox"
          name="mainImageBounceAnimation"
          onChange={this.changeAnimation}
          checked={this.state.mainImageBounceAnimation}
        />{" "}
        Main Image Bounce <br />
        <input
          className=""
          type="checkbox"
          name="flowersFallingAnimation"
          onChange={this.changeAnimation}
          checked={this.state.flowersFallingAnimation}
        />{" "}
        Flowers Falling Animation <br />
      </div>
    )
  }

}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

.as-console-wrapper { max-height: 50% !important; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 3

您的更改动画事件有问题

changeAnimation = e => {
   this.setState(
    {
     // [e.target.value]: !(this.state[event.target.value]),
     //here you have to change like
     this.state[e.target.value]: !(this.state[event.target.value]),
    },
    () => {
      console.log(this.state);
    }
);

Answer 4

其他响应是正确的，因为您可以使用动态键和变量设置setState，但是React建议不要在setState中使用状态。

从文档中： “ React可以将多个setState（）调用批处理到单个更新中以提高性能。因为this.props和this.state可以异步更新，所以您不应依赖于它们的值来计算下一个状态。” -https://reactjs.org/docs/state-and-lifecycle.html

您可以采取与其他注释相同的想法，并让setState接受一个函数。我在代码中使用了此按钮（按钮是在外部函数中定义的）。

this.setState((prevState) => ({
    [button]: !prevState[button]
  }));

使用动态键值对切换状态

4 个答案: