在输入元素(Reactjs）中侦听的多事件

Mutliple event's to listen for in a input element (Reactjs)

本文关键字：事件 输入 元素 Reactjs      更新时间：2023-09-26

你好，我有一个这样的输入元素：

<input 
  type="text" 
  className="form-control" 
  placeholder="Search for..." 
  value={this.state.text} 
  onChange={this.handleTextChange} />

我旁边有按钮，基本上onClick会使用输入文本进行 ajax 调用以获取搜索结果。

我想做的不仅是点击事件，而且在按回车键时 ajax 调用应该通过，所以我尝试了这样的事情：

<input 
  type="text" 
  className="form-control" 
  placeholder="Search for..." 
  value=this.state.text} 
  onChange={this.handleTextChange} 
  onKeyDown={this.handleEnter} />

但它抓住了工作任何想法，为什么？

删除e.preventDefault 

handleEnter: function (e) {
  if (e.keyCode == 13) {
    var text = this.state.text.trim();
    if(!text){
      return;
    }
    this.props.onTextChange({ text: text });
  }
},
handleTextChange: function (e) {
  this.setState({ text : e.target.value });
},

Example

相关文章：