検索を実行するためのHTML入力/データリストのイベント

Question

私はReactアプリケーションでそれにバインドされたデータリストを持つ入力フィールドであるtypeAheadコンポーネントを作成しました。入力フィールドの "onChange"イベントをリッスンし、一致するtypeAhead結果を取得します。これは正常に動作します。

これで、検索を実行するリスナーを追加しようとしています。ドロップダウンからオプションが選択されたとき、または「Enter」キーが押されたときに起こるはずです。私は "onSelect"イベントを聞いてみましたが、決して解雇されないようです。そして、私は "enter"キーイベントを聞く方法もわかりません。

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 
} 

助けていただきありがとうございます！

EDIT：Tharaka Wijebandaraの答えは、「入力」キーの問題を解決します。データリストの選択を聞く方法を見つけようとしています。

私はユーザーが検索フィールドに何かを入力すると、クエリ結果を取得してデータリストに追加します。これはうまくいきます。

ここで達成しようとしているのは、データリストからオプションを選択したときにexecuteSearch関数を呼び出すことです。

Answer 1

divの代わりにhtml form要素を使用し、「enter」キーを聞くのにonSubmitイベントを使用してください。

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コンポーネントがマウントされたときにグローバルリスナーが作成されます。