Reactのテキストエリアで入力を押したときにフォームを送信しますか？

Question

ユーザーがテキストエリアで「入力」を押したときにフォームを送信するにはどうすればよいですか？デフォルトの動作は、改行をテキストエリアに挿入することです。

<form className="" onSubmit={newComment}> 
     <textarea type="text" rows="3" name="body" /> 
     <button className="btn" type="submit"> 
      Comment 
     </button> 
    </form> 

私はtextareaにonChangeイベントがあり、Enterキーが押されたかどうかを確認する関数テストが必要ですか？これは私がバニラのJavaScriptを使って行う方法ですが、Reactの合成イベントでキーイベントを見つけることができませんでした。

Answer 1

あなたのtextareaは制御されていない要素です。これは許容されるアプローチですが、フェイスブックは制御された入力の使用を奨励します。

とにかく、ここで制御されていないフォームのためにそれを行う方法です：あなたはまた、上記の代わりにrefsのidを使用することができます

onEnterPress = (e) => { 
    if(e.keyCode == 13 && e.shiftKey == false) { 
    e.preventDefault(); 
    this.myFormRef.submit(); 
    } 
} 

render() { 
    return (
    <form ref={el => this.myFormRef = el} className=""> 
     <textarea type="text" rows="3" name="body" onKeyDown={this.onEnterPress} /> 
     <button className="btn" type="submit"> 
     Comment 
     </button> 
    </form> 
); 
} 

。