javascript - 如何在 react 回调中触发 handleSubmit

Question

在将 place_id 推送到 BrowserHistory 之前，我需要等待回调

handleSubmit(event) {
    event.preventDefault();
    browserHistory.push(`/place_id/`+this.state.place.place_id);
}

表单会在选择地点时自动提交(这很好)但是 this.state.place 在回调之前仍然为 null。

<form onSubmit={ this.handleSubmit.bind(this) }>
    <Autocomplete
        onPlaceSelected={(place) => {
            this.setState({place: place});
        }}
    />
</form>

Answer 1

你可以这样使用:

handleSubmit(event) {
  if (this.state.place) {
    browserHistory.push(`/place_id/`+this.state.place.place_id);
  } else {
    event.preventDefault();
  }
}

这是组件:

  <form onSubmit={ this.handleSubmit.bind(this) } ref={(c) => this.frm = c}>
    <Autocomplete
        onPlaceSelected={(place) => {
          this.setState({place: place}, () => {this.frm.submit()});
        }}
    />
  </form>

setState方法的回调会在地方的值被设置为state后调用form的submit，并且一旦它在那里 - browserHistory.push 将在 handleSubmit 中调用，因为您在 this.state 中有一个位置。