在setState()之后获取状态

Question

我知道setState()不会立即变异this.state.因此,在下面的代码中,单击按钮后总是取消选中复选框.如何解决这个问题？

handleClick = () => {
  this.setState({tick: !this.state.tick})
}

render() {
  return (
    <button type='button' onClick={() => this.handleClick()} >
      <input type="checkbox" value={this.state.tick} />
      Tick here
    </button>
  )
}

Answer 1

用checked而不是value:

<input type="checkbox" checked={this.state.tick} />

来自规范:

checked:布尔值; 如果存在,则当前切换复选框

value:如果当前切换复选框,则在提交表单时用作复选框值的字符串