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 함수가 호출되지 않는 것 같습니다. 하지만 내 코드에서는 제출 버튼을 클릭 할 때마다 확실히 호출됩니다. 나는이 차이를 유발할 수있는 것을 발견하지 않고 오랜 시간 동안 나의 코드와 예제 코드를 봤다. 어떤 도움을 주셔서 감사합니다.

편집 : 내보내기 기능 추가 :

당신은 당신의 포장 사용자 지정 양식 DatasetForm에 사용자 정의 validate 기능에 전달해야

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

Answer 1

. 이처럼 :

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.