handleSubmitが無効なフィールドでトリガーされました

Question

私はthisの例を使用して、同期的に検証する簡単なフォームを作成します。

これは私のフォームです：

const DatasetForm: React.StatelessComponent = (props: any) => { 
    const { handleSubmit, pristine, reset, submitting } = props; 
    console.log(props); 

    return (<form onSubmit= { handleSubmit }> 
      <div> 
       <div> 
        <Field 
         name="firstName" 
         component= {renderField} 
         type="text" 
         label="First Name" 
        /> 
       </div> 
       <div> 
        <button type="submit" disabled={submitting}>Submit</button> 
       </div> 
      </div> 
     </form>) 
} 

私はまったく同じrenderField機能を使用していますし、これは私の検証機能である：

const validate = (values: IValues) => { 
    let errors: IValues = { 
     firstName: '' 
    }; 
    if (!values.firstName) { 
     errors.firstName = 'Required'; 
    } 
    else if (values.firstName !== 'aaaaa') { 
     errors.firstName = 'Must be aaaaa'; 
    } 
    return errors; 
} 

handleSubmit機能がシンプルconsole.logであり、以下のように渡され小道具

今の例では、フィールドが有効でない場合、handleSubmit関数は呼び出されないようです。しかし、私のコードでは、送信ボタンをクリックするたびに必ず呼び出されます。私は、この違いを引き起こす可能性のあるものを見つけずに、長い間、私のコードとサンプルコードの両方を見てきました。どんな助けもありがとうございます。

EDIT：エクスポート機能を追加：

export default reduxForm({ 
    form: 'simpleForm', 
    validate 
})(DatasetForm); 

Answer 1

あなたのラップカスタムフォームDatasetFormにカスタムvalidate機能に渡す必要があります。このように：

const validate2 = (values) => { 
    let errors = {}; 
    if (!values.firstName) { 
    errors.firstName = 'Required'; 
    } 
    else if (values.firstName !== 'aaaaa') { 
    errors.firstName = 'Must be aaaaa'; 
    } 
    console.log(errors); 
    return errors; 
} 

---

const DatasetForm = (props) => { 
    const { handleSubmit, pristine, reset, submitting } = props; 

    return (<form onSubmit={handleSubmit}> 
    <div> 
     <div> 
     <Field 
      name="firstName" 
      component={renderField} 
      type="text" 
      label="First Name" 
     /> 
     </div> 
     <div> 
     <button type="submit" disabled={submitting}>Submit</button> 
     </div> 
    </div> 
    </form>) 
} 

export default reduxForm({ 
    form: 'syncValidation', 
    validate: validate2, 
    warn 
})(DatasetForm) 

---

このworking sampleをチェックしてください。