redux -form 형식의 텍스트 필드 내부에서 유효성 확인

Question

나는 두 시간 동안 작업에 어려움을 겪고 있습니다. 나는 재료 UI에서 REDUX 양식 텍스트 필드가 있고 난이처럼 사용

<Field 
      id="searchCif" 
      name="searchCif" 
      component={TextField} 
      floatingLabelText={SEARCHVIEW_HINT_CIF} 
      disabled={(afm !== undefined)} 
      validate={[requireValidator, onlyNumeric]} 
     /> 

유효성 검증은 인수 두 가지 기능으로 걸릴 소품

:

const requireValidator = (value, intl) => (
    value === undefined ? intl.formatMessage({ id: 'error.search.cif.afm' }) : 
    undefined 
); 

const onlyNumeric = (value, intl) => (
    (value !== undefined && !(/^([0-9])+$/g).test(value)) ? 
    intl.formatMessage({ id: 'error.search.cif.afm.only.number' }) : 
    undefined 
); 

나는 국제을 사용하여 내 메시지를 번역해야하기 때문에 . 그러나 intl.formatted message is not a function 오류가 표시됩니다. 그러므로 나는 다음과 같이 썼다 : validate={() => [requireValidator(value, intl), onlyNumeric(value, int)]}. 오류가 표시되지 않지만 유효성 검사가 제대로 작동하지 않습니다. 어떤 아이디어?

Answer 1

Validate가 expects 값 및 allValues ​​매개 변수가있는 함수로 지정되기 때문에 유효성 검사 기능이 제대로 작동하지 않습니다. 추가 매개 변수를 전달하기 위해 함수를 다른 함수에 랩핑하십시오.

const requireValidator = intl => value => (
    (value === undefined) ? 
    intl.formatMessage({ id: 'error.search.cif.afm' }) : undefined 
); 

const requireValidatorInternationalized = requireValidator(intl); 

const onlyNumeric = intl => value => (
    (value !== undefined && !(/^([0-9])+$/g).test(value)) ? 
    intl.formatMessage({ id: 'error.search.cif.afm.only.number' }) : 
    undefined 
); 

const onlyNumericInternationalized = onlyNumeric(intl); 

<Field 
     id="searchCif" 
     name="searchCif" 
     component={TextField} 
     floatingLabelText={SEARCHVIEW_HINT_CIF} 
     disabled={(afm !== undefined)} 
     validate={[requireValidatorInternationalized, onlyNumericInternationalized]} 
    /> 

Erikras (소유자와 REDUX 형태의 저장소에 주요 기여자) advises 당신의 매개 변수 검증의 단일 인스턴스를 정의하는 대신 필드의 불필요한 재 렌더링을 방지하기 위해 유효성 검사 소품에서 매개 변수 전달 (예 : 하지 마십시오 Validate={[requiredValidator(intl), onlyNumeric(intl)]}).