[英]Changing the state of a checkbox with 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,
})
}
你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);
}
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
相同
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.