Question

我制作了一个简单的反应组件，用于跟踪表格行中复选框的状态。

class EventRowAdmin extends Component {
constructor(props) {
    super(props);
    this.state = { isChecked: false };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
    this.setState(({ isChecked }) => (
      {
        isChecked: !isChecked
      }
    ));

    console.log(this.state.isChecked);
}

render() {
    return (
            <tr id={this.props.id}>
                <td><input onChange={this.handleChange} className="remove-event" type="checkbox" /></td>
            </tr>
    )
    }
}

从代码中可以看出，一旦单击复选框，我就会将复选框的当前状态记录到控制台。

虽然初始状态设置为false，但单击该复选框会导致＆＃34; false＆＃34;单击后输出到控制台。一旦再次点击（未选中），＆＃34; true＆＃34;输出到控制台。

对此有何解释？

Answer 1

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

如果要在setState之后查看更新的状态值，请使用可选的回调参数：

     handleChange(event) {
        this.setState(({ isChecked }) => (
          {
            isChecked: !isChecked
          }
        ), function () {
            console.log(this.state.isChecked, 'updated state value');
        });
        console.log(event.target.checked);
      }

在这里你可以看到最后一个console.log也显示了复选框的实际值..

React复选框切换：行为与预期的

1 个答案: