私の子コンポーネントは検証を実行しますが、上位コンポーネントでその検証を使用する必要があります

Question

ユーザに入力していくつかのオプションを選択できるようにするフォームがあります。

これは、コンポーネント<InputWithValidation />は、いくつかの検証を行い

<MyForm> 
    <InputWithValidation /> 
</MyForm> 

のように見えるかもしれませんが、彼らの名は、この提出が通過する前に、一定の長さでなければなら言います。

今私はこの設定を持っている方法はMyFormにはInputWithValidationの小道具として渡したsubmit()という機能があります。送信をクリックすると、InputWithValidationは入力をチェックし、有効であればthis.props.submitを呼び出します。それは正常に動作しています。しかし、今私がフォームを送信するためにホットキーを追加したいので、私はMyFormに次の行を追加します。

document.onkeyup = function (event) { 
    if (/* keys match what I want */) { 
     this.submit(); 
    } 
} 

しかし、これは私が入力の検証と呼ばれたことがないよう、機能しません。 1つの入力と多くの入力に対してこの問題を解決するにはどうすればよいですか？これはフォームの検証と似ていますが、ホットキーは少し複雑です。

私の質問はこの質問Validate the child's component data in parent componentと似ていますが、私は誰かがこのような状況のための何らかのベストプラクティスで答えることを期待しています。

ありがとうございました！

Answer 1

<InputWithValidation />クラスはthis.props.submit（）の適切なコンテキストに既にアクセスしているため、そのイベントハンドラを<InputWithValidation />クラスに移動することをおすすめします。このようにコンポーネントをマウントした後に追加することができます。

class InputWithValidation extends React.Component { 
    //constructor 

    //other functions 

    componentDidMount() { 
     //add keydown event handler here 
      //pass to parent with this.props.submit(e.whatever) 
    } 

    render() { 
     //render function 
    } 
}