HTML - 用于执行搜索的输入/数据列表事件

我已经创建了一个typeAhead组件，它是一个输入字段，在React应用程序中绑定了一个数据列表。我听取输入字段上的“onChange”事件，该事件取得匹配的typeAhead结果，这工作正常。HTML - 用于执行搜索的输入/数据列表事件

因此，现在我试图添加一些侦听器来执行搜索，当从下拉列表中选择一个选项或按下“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函数。

来源

2017-05-26 stackato

'datalist'组件返回什么？如果不知道，很难调试 – vijayscode

使用html form元素而不是div并使用onSubmit事件来监听“输入”密钥。

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

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

来源

2017-05-26 14:11:11

你可以听键盘事件：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当你的组件被挂载时它将创建一个全局监听器。

来源

2017-05-26 14:19:17 Joao

'datalist'不是自定义组件。 https://www.w3schools.com/tags/tag_datalist.asp –

哦* facepalm :) – Joao

HTML - 用于执行搜索的输入/数据列表事件

回答

相关问题