Question

我正在尝试使文本框自动对焦。

但是，setState似乎来得太迟了。

在Popup.show内调用它。我创建了一个按钮来console.log状态，它确实设置为true，但它必须发生得太晚。

如何在Popup.show发生时调用setState？

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focused: false,
    };
  }
  onClick = (event) => {
    console.log('Says focussed FALSE', this.state.focused)
    this.setState({ focused:true });
    Popup.show(<div>
      <SearchBar
        autoFocus
        focused={this.state.focused}
      />
      <button onClick={this.checkState}>It says TRUE here</button>
    </div>, 
     console.log('Says focussed FALSE still', this.state.focused),
   { animationType: 'slide-up'});
  };
  checkState = (e) =>{
    console.log(this.state)
  }
  render() {
    return (
      <div style={{ padding: '0.15rem' }}>
      <Button onClick={this.onClick.bind(this)}>Open & Focus</Button>
    </div>);
  }
}

Answer 1

始终记住setState不会立即执行。如果您想在Popup.show()之后setState，则可以使用回调：

this.setState({ focused: true }, () => {
  Popup.show(...)
})

您已经在使用箭头功能，在渲染功能中不需要.bind(this)。

Answer 2

setState没有立即设置状态

来自：https://facebook.github.io/react/docs/react-component.html#setstate

将setState（）视为请求而不是更新组件的立即命令。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证立即应用状态更改。

将setState更改为

this.setState({ focused: true }, () => {
    Popup.show(<div>
    <SearchBar
    autoFocus
    focused={this.state.focused}
    />
    <button onClick={this.checkState}>It says TRUE here</button>
    </div>)
});

setState被调用太晚了

2 个答案: