使用setState更改復選框的狀態

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相同