2017-07-11 9 views
0

私はReactJSの学習を始めました。私はユーザーが彼/彼女のアドレスを複数の入力フィールドに入力するフォームを作ろうとしています。ユーザーがすべての入力フィールドに入力を完了すると、アドレスを検証する関数がトリガーされます。研究を通して、私はonChangeとonBlurについて知りましたが、それは1つの入力フィールドにしか機能しないようです。ユーザーが終了した後に5つの入力をすべて追跡して機能をトリガーする他の方法はありますか?あるいは、onChangeを使用する方法があれば、私は知りたいと思っています。以下は私のフォームのコードです。前もって感謝します。ReactJS - ユーザーが複数の入力を完了するのを待っています

<form> 
     <label> 
     <DebounceInput 
      name="addressLine1" 
      placeholder="Address Line 1" 
      debounceTimeout={300} 
      onChange={ (e) => this.handleChange(e, name)} 
     /> 
     </label> 
     <label> 
     <DebounceInput 
      name="addressLine2" 
      placeholder="Address Line 2" 
      debounceTimeout={300} 
      onChange={ (e) => this.handleChange(e, name)} 
      value={this.state.address.addressLine2} 
     /> 
     </label> 
     <label> 
     <DebounceInput 
      name="city" 
      placeholder="City" 
      debounceTimeout={300} 
      onChange={ (e) => this.handleChange(e, name)} 
      value={this.state.address.city} 
     /> 
     </label> 
     <label> 
     <br /> 
     <DebounceInput 
      name="state" 
      placeholder="State" 
      debounceTimeout={300} 
      onChange={ (e) => this.handleChange(e, name)} 
      value={this.state.address.state} 
     /> 
     </label> 
     <label> 
     <DebounceInput 
      name="postalCode" 
      placeholder="Postal Code" 
      debounceTimeout={300} 
      onChange={ (e) => this.handleChange(e, name)} 
      value={this.state.address.postalCode} 
     /> 
     </label> 
    </form> 
+0

実際に検証はこれ以上行われません。それは動的でなければなりません。代わりにredux-formを使用してください。 –

答えて

0

たぶん、あなたはあなたのcurrentStateの検証を行うのに十分である場合は、検証をトリガすることができそうだとすれば、あなたは、あなたのチェックhandleChange機能、内部の状態を組み込むことができます。

関連する問題