Question

我创建了一个typeAhead组件，它是一个输入字段，在React应用程序中绑定了一个数据列表。我在输入字段上侦听“onChange”事件，该事件获取匹配的typeAhead结果，这样可以正常工作。

所以现在我正在尝试添加一些用于执行搜索的侦听器，当从下拉列表中选择一个选项或按下“enter”键时，应该会发生这种情况。我试着听“onSelect”事件，但它似乎永远不会被解雇。而且我不确定如何监听“输入”键事件。

render() {
        return(
            <div>
                <input  type="text" id="searchfld" list="data" placeholder="Search..." onChange={getTypeAheadResults} />

                <datalist id="data" onChange= {executesearch} onSelect={executeSearch}></datalist>
            </div>
        );
}


const getTypeAheadResults= () => {
  //fires
}

const executesearch = () => {
  //does not fire
}

任何帮助都有帮助，谢谢！

编辑：Tharaka Wijebandara的回答解决了“进入”关键问题。仍试图弄清楚如何倾听数据选择。

重申 - 当用户在搜索字段中输入内容时，我会获取查询结果并将其添加到数据列表中。这工作正常。

我现在要完成的是在从数据列表中选择一个选项时调用我的executeSearch函数。

Answer 1

使用html form元素代替div并使用onSubmit事件进行收听＆＃34;输入＆＃34;键。

function render() {
  return (
    <form onSubmit={onSumbit}>
      <input
        type="text"
        id="searchfld"
        list="data"
        placeholder="Search..."
      />
      <datalist id="data"/>
    </form>
  );
}

const onSubmit = () => {
  //....
}

Answer 2

您可以收听键盘事件：https://facebook.github.io/react/docs/events.html#keyboard-events

handleKeyPress = (e) => {
  if(e.key == 'Enter'){
    //do something here
  }
}
<input type="text" onKeyPress={this.handleKeyPress} />

但是如果按键不在输入上，你可以找到一种方法将它附加到正文，或者使用react-keydown：https://www.npmjs.com/package/react-keydown，这将在你的组件安装时创建一个全局监听器

HTML - 用于执行搜索的输入/ datalist事件

2 个答案: