変更イベントで 'Enter'キーが押されたことを検出しました

Question

私はリアクションコンポーネントを持っています。これは多かれ少なかれユーザーが入力できるシンプルなテキストエリアです。ここでのコードは、これまでに次のようになります。

import React from 'react'; 
import {connect} from 'react-redux'; 

function handleChange(event) { 
    const {setText} = this.props; 

    //is there some way I can detect [ENTER] here and call this.props.add instead? 
    setText(event.target.value); 
} 

class TextArea extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     const {value} = this.props; 

     return (
      <div className="list-item"> 
       <textarea 
        className="form-control" 
        value={value} 
        onChange={handleChange.bind(this)} 
       /> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     value: state.value 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     setText(text) { 
      const action = { 
       type: 'set-text', 
       text: text 
      }; 

      dispatch(action); 
     }, 
     add() { 
      const action = { 
       type: 'add' 
      }; 

      dispatch(action); 
     } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(TextArea) 

このコンポーネントは、ユーザーがタイプのテキスト領域に何かをするたびに更新されたReduxのストアに接続されています。 reduxストアは新しい値をtextareaコンポーネントに返し、textareaコンポーネントは新しい値を表示するために再レンダリングします。

これまでのところ動作していましたが、Enterキーを押すとこのコンポーネントの動作が異なるようにしたいと考えています。変更イベントはkeyCodeを公開していません（少なくとも私が知っているものではありません）。は、setTextの代わりにEnterキーを押した場合、add関数を呼び出す方法がわかりません。

入力したkeyCode（13）を検出するために使用できるonKeyDownハンドラをテキストエリアにアタッチしていましたが、テキストを正しく設定できませんでした。なぜなら、添付されたkeyCode文字にイベントを追加して現在の値に追加すると、大文字か小文字かを判断する方法はありません。

私はかなりここにこだわっています。私はchangeイベントのenterキーを検出する方法がないと思っています.keyDownイベントにはすべての可能な入力を処理する方法がありません。おそらく2つを組み合わせる方法はありますか？

ありがとうございます！

Answer 1

同じ時間に両方のハンドラを使用できます。

onKeyDownでは、キーを確認できます。もしそうであればonChange呼び出しを防ぐために押さコールevent.preventDefault()を入力するか、またはそうでない場合 -​​イベントのデフォルトハンドラが呼び出されるまで何もしない

Javascriptのイベントキューはchangeイベントが含まれていません。 をonKeyDownハンドラに電話すると、changeイベントが発生します。