フィールドを一般的にreactjsで検証します

Question

私はonChangeイベントのすべてのフィールドを検証する必要があるフォームを持っています。私はonChangeイベントを一般的に処理しましたが、どのようにこれらのフィールドを総称的に検証できますか？ここで私は何をしたのですか

誰でも私がしようとしている方法で一般的に検証を処理する方法を教えてくださいできますか？上記のコードでは

UPDATE

handleChange = event => { 
    let nextState = Object.assign({}, this.state, { 
    [event.target.name]: event.target.value 
    }); 
    this.setState(this.validateField(nextState)); 
}; 

validateField(state) { 
    console.log('state', state); 
    const validate = ['APIKey', 'APISecret']; 
    let validation = validate.forEach(field => { 
    if (state[field].length === 0) { 
     state.errors[field] = 'This field cannot be empty'; 
    } 
    }); 
    console.log(validation); 
    return Object.assign({}, state); 
} 

私は任意のフィールドに触れると、いくつかのテキストを書く場合は、エラーが他のフィールドに表示されます。テキストを書くとエラーは消えません。

Answer 1

私は

にしようとしていた方法で包括的に検証を処理する方法のような構造を有する私を導いてください。

{ 
    'fieldName': [validator1, validation2, ...] 
} 

をそしてあなたは順序でこれらのバリデータを実行することができます。それぞれのバリができvalue => Error | null

• Formstate

は型定義が付属していますし、私はこの次の方法を行うことができ

Answer 2

（すなわち、単純なvalue => Promise<string | null>機能を使用して）このような検証を扱うもっと

handleChange = event => { 
    const fieldName = event.target.name; 
    this.setState({ [event.target.name]: event.target.value },() => { 
     this.validateField([fieldName]); 
    }); 
    }; 

    handleBlur = event => { 
    const fieldName = event.target.name; 
    this.validateField([fieldName]); 
    }; 


    validateField = validate => { 
    const errors = { ...this.state.errors }; 
    console.log(errors, validate); 
    let hasError = false; 
    validate.forEach(field => { 
     if (this.state[field].length === 0) { 
     hasError = true; 
     errors[field] = `${field} cannot be empty`; 
     } else { 
     errors[field] = ''; 
     } 
    }); 
    this.setState({ errors }); 
    return !hasError; 
    }; 

    handleSubmit = event => { 
    event.preventDefault(); 
    if (this.validateField(['APIKey', 'APISecret'])) { 
     console.log('you can now submit the data'); 
    } 
    }; 

validate.jsをvalidate.jsに設定した方が良いと思います。その関数を呼び出します。しかし、私はそれが必要な場所でこの関数を呼び出すことができるように私はこれを別に保持する場合、どのように私はvalidateField関数で使用される状態を使用することができます明確なアイデアはありません。お気軽にご意見をお寄せください。