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} />

来自spec：

checked：布尔值；如果存在，则该复选框当前处于启用状态

value：提交表单时用作复选框值的字符串，如果当前复选框处于选中状态

Answer 2

ic3b3rg的答案突出显示了需要更改代码才能使复选框起作用的内容。我将重点介绍一些其他可以改进的地方。

复选框的检查状态应使用checked属性进行控制
不要使用箭头函数声明事件处理程序，因为它将在每个渲染期间创建一个新的匿名函数。将函数绑定到类并将其传递给事件处理程序是个好主意。

类似这样的东西

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

handleClick() {
  ...
}

// render
<button type = 'button' onClick = {this.handleClick} >

当您要基于现有状态值更新状态时，通常不建议直接在this.state.key函数中调用setState，因为setState是异步调用，您可以并没有确切地说出您当前状态的价值。相反，如果您使用this.setState((prevState, props) => ({})回调，则状态值将根据调用过程中现有状态值进行更新。

更改此

this.setState({tick: !this.state.tick})

到

this.setState((prevState, props) => ({
  tick: !prevState.tick
}));

这是一个完整的示例

class Example extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      tick: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // when updating state values from existing state values
    // you should use not use value: !this.state.value directly
    this.setState((prevState, props) => ({
      tick: !prevState.tick
    }));
  }

  render() {
    return (
      <button type = 'button' onClick={this.handleClick} >
        <input type = "checkbox" checked={this.state.tick} />Tick here
      </button>
    );
  }
}

ReactDOM.render( <
  Example / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

在setState（）之后获取状态

2 个答案: