时间戳

首页 > 解决方案 > 使用 setState 更改复选框的状态

javascript - 使用 setState 更改复选框的状态

问题描述

我有一个组件，当我单击按钮时，我能够更改复选框项目的状态。我还希望能够在另一个按钮单击中更改状态，其中包含更多逻辑。我遇到的问题是，当代码进入状态时，它不会将状态设置回 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,
      })
    }

标签： javascriptreactjs

解决方案

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

推荐阅读