reactjsのテキストエリアのバリデーション

Question

私は反応して還元するのが新しく、現在フィールドの検証に取り組んでいます。私は<Field type="text" component="input" />タイプのフィールドを検証することができます。しかし、selectbox、textarea、radioボタンを検証する方法。

以下

が助けてください<Field type="text" component="input" />

const required = value => value ? undefined : 'Required' 

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <input {...input} placeholder={label} type={type}/> 
     {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
    </div> 
    </div> 
) 

class myApp extends React.Component { 

render() { 

return (
<div> 
<Field type="text" component={renderField} validate={required} /> 
</div> 

) 
} 
} 

の検証のための私のコードで、

おかげで多くの、あなたが利用されていません Shash

Answer 1

は、それが意図された方法で反応します。主にあなたの状態で検証が行われるはずです。あなたのフィールドを検証することができますが、これはあなたのためのものよりもユーザーのためのものです。

入力はvalueのように状態からプロパティを取得し、そのonChangeメソッドは状態を更新する必要があります。すべての入力タイプには、（新しい文字が1つでも）新しい値で状態を更新する方法であるonChangeと、状態が更新されたために入力が更新された値に設定されているためです。

Here is the link to the docs

例：

<input 
.... 
onChange={this.onChange} 
/> 

とあなたのクラスで必要なフィールドを検証したい場合は、単にあなたの状態を確認後

onChange(value){ 
    this.setState({inputValue: value}); 
} 

を持っている：

//this is an example function you can call when the save button is clicked 
onSave(){ 
    if(this.props.isRequired && this.state.value == ''){ 
     alert('The input '+this.state.label+' requires a value';); 
    } 
} 

これで、ユーザーが保存をクリックし、状態が正しく記入されていない部分があると、かなりの検証メッセージを表示したい場合は、ユーザーに通知するためにUIを変更する独自のコードを作成するか、そこに素敵な図書館があります。

あなたは、renderFieldを使用してフォーム要素のタイプの問題を自分自身に課しました。次の2つのオプションがあります。異なるフォームタイプ（テキストエリア、選択ボックス、&入力）に対して独自のコンポーネントをレンダリングしたり、2つのアカウントを作成したりしないでください。

あなたが使用しているライブラリでは、単に<Field type="text" component={'textarea'} validate={required} />または<Field type="text" component={'input'} validate={required} />と言うことができます。エントリー用には、これは私が使用することをお勧めするテンプレートです。あなたの現在のシステムを使用したい場合、あなたは例えば入力またはTEXTAREAレンダリングする必要があるかどうかを決定するためのシステムを作成する必要があります：あなたの状態を管理することで、検証の取り扱い

const renderInputField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
     <label>{label}</label> 
      <div> 
       <input {...input} placeholder={label} type={type}/> 
       {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
      </div> 
    </div> 
) 

const renderTextareaField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
     <label>{label}</label> 
      <div> 
       <textarea {...input} placeholder={label} type={type}/> 
       {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
      </div> 
    </div> 
) 

//in your render function simply call 
<Field type="text" component={renderInputField} validate={required} /> 
<Field type="text" component={renderTextareaField} validate={required} /> 

Answer 2

は、あなたの人生は厳しいことができますが、実際の場合私たちは真剣にこれが不必要な努力だと思っています。

私はlibraryを書いています。これは、クライアント側のフィールドの検証に関連するすべてを処理します。

フィールドを検証するには、フィールドコンポーネントをラップするだけで完了です。手動で状態を管理するために多くの労力を費やしません。

<Validation group="myGroup1" 
    validators={[ 
      { 
      validator: (val) => !validator.isEmpty(val), 
      errorMessage: "Cannot be left empty" 
      }, ... 
     }]}> 
      <TextField value={this.state.value} 
         className={styles.inputStyles} 
         style={{width: "100%"}} 
         onChange={ 
         (evt)=>{ 
          console.log("you have typed: ", evt.target.value); 
         } 


    }/>