Question

我有一个组件，当我单击按钮时，我可以更改复选框项目的状态。我还希望能够通过另一个按钮单击来更改状态，其中包含更多逻辑。我遇到的问题是，当代码进入条件时，它不会将状态设置回false。

我尝试使用setstate再次更改状态，但它不会更改enabledCheckBox的状态。

this.setState({
  enabledCheckBox: !this.state.enabledCheckBox,
})

谁能告诉我问题是什么？谢谢

class Customer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...props,
      enabledCheckBox: false
    };
  }

  //this works    
  onChangeCheckBox=()=>{
    this.setState({
      enabledCheckBox: !this.state.enabledCheckBox,
    })
  }

  //cant get this to work
  handleCustomerClick = (event) => {

    if (this.state.enabledCheckBox) {      
      this.setState({
        enabledCheckBox: !this.state.enabledCheckBox,
      })
    }

Answer 1

您的this被错误地绑定，请尝试此操作

handleCustomerClick = (event) => {
  let {enabledCheckBox} = this.state;

  this.setState({
    enabledCheckBox: !enabledCheckBox,
  });
}

如果您确实需要if语句，则可以执行以下操作；

handleCustomerClick = (event) => {
  let {enabledCheckBox} = this.state;
  let data;

  if (enabledCheckBox) {
    data = {
      enabledCheckBox: !enabledCheckBox
    }
  }

  this.setState(data);
}

Answer 2

https://codesandbox.io/s/1y0zywy727

我提供了一个工作示例。它所做的事情与您描述的类似。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enabledCheckBox: false
    };
  }

  onClick = () => {
    this.setState({ enabledCheckBox: !this.state.enabledCheckBox });
  };

  render() {
    return (
      <div>
        <input
          type="checkbox"
          value={"some checked box"}
          checked={this.state.enabledCheckBox}
          onChange={this.onClick}
        />
        {this.state.enabledCheckBox ? <div>Blue</div> : <div>Red</div>}
        <button onClick={this.onClick}>Click to Change Color</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

input和div都使用this.state.enabledcheckbox。因此，如果您选中该框，则不仅会选中该框，而且div的“颜色”也会随之变化。与单击button

相同

使用setState更改复选框的状态

2 个答案: