javascript - 在输入元素中监听多个事件(React Js)

Question

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

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

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

我想做的不仅是点击事件，而且在按下 Enter 时 ajax 调用也应该进行，所以我尝试了这样的事情:

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

但是它捕获了任何想法，为什么？

Answer 1

删除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