Question

我要求在标签中键入某些内容后，按Enter键即可执行搜索功能。

它正常运行，就像：

<input
  onChange={this.onInputChange}
  onKeyPress={this.onSearch}
/>

onInputChange = (e) => {
  console.log(2);
  this.setState({
    searchText: e.target.value
  }) 
}

onSearch = (e) => {
  console.log(1);
  if (e.which === 13) {
    search(this.state.searchText); // some search api ...
  }
}

但如果用户Enter的速度非常快，例如0.1s，则this.state.searchText不会得到正确更新。

这不仅是由于setState是异步方法引起的，而且onKeyPress是在onChange之前触发的。

有什么想法可以解决这个问题吗？

Answer 1

    <input 
     ref={(input) => this.selectVal = input}
     onKeyPress={(e) => e.which === 13 ?this.onSearch():''}
    />
   onSearch = () => {
    console.log("value",this.selectVal.value);
   //  search(this.input.current.value); // some search api ...
   }

尝试这种方式

Answer 2

<input
  onChange={this.onInputChange}
  onKeyDown={this.onSearch}
/>

onInputChange = (e) => {
  this.setState({
    searchText: e.target.value
  }) 
}

onSearch = (e) => {
  if (e.keyCode === 13) {
    search(this.state.searchText); // some search api ...
  }
}

Answer 3

所以我真的不明白为什么要使用两个单独的功能。

首先，如果您仅将searchText用于两个功能，则可以执行以下操作：

HTML

<input
  onKeyPress={this.onKeyPress} />

JS

onKeyPress = e => {
  if(e.which === 13) {
    // Send Query
    search(e.target.value);
  }
}

即使您需要在其他地方使用searchText，也可以这样做：

onKeyPress = e => {
  let value = e.target.value;
  if(e.which === 13) {
    // Send Query
    search(value);
  } else this.setState({searchText: value});
}

如果我错过了什么，请告诉我^^

Keydown是<input />的onChange之前的触发器

3 个答案: