单个复选框在react组件中不起作用

Question

个别选择框有时不起作用，当我在另一个系统中构建应用程序时，它可以很好地工作，是代码更改问题还是版本问题在组选择上起作用

class Checkbox extends BaseComponent{
constructor(props){
super(props);
this._bind('handleCheck');
this.state = {
checked: this.props.initialValue
};
}

handleCheck(){
this.setState({checked: !this.state.checked}, () => {
this.props.onChange(this.state.checked);
});
}


render(){
const {labelCss} = this.props;
const divCss = 'checkbox';
return (
<div className={divCss}>
<input
id={this.props.id}
type='checkbox'
onChange={this.handleCheck}
defaultChecked={this.state.checked}
/>
<label
htmlFor={this.props.id}
className={classNames('aria-label', labelCss)}>
{this.props.labelText}
</label>

</div>
);
}
}

Answer 1

我认为错误出现在这一行：

this.setState({checked: !this.state.checked}, () => {
this.props.onChange(this.state.checked);
});

你可以试着做这个

this.setState(prevState => ({checked: !prevState.checked}), () => {
this.props.onChange(this.state.checked);
});

问题在于React状态更新可能是异步的(https://es.reactjs.org/docs/state-and-lifecycle.html#state-更新可能是异步的(

您还需要在输入中使用值道具。value={this.state.checked}