reduxForm V7이있는 컨테이너 내부에서 redux-form 오류에 액세스하는 방법이 있습니까?

Question

이전에 Redux-Form V5에서 render 함수 내부에서 email.error 및 password.error이라는 오류에 액세스했습니다. V7에서

, 내 CSS 나에게 그것을 이런 식으로 할 슬픔을주고있다 : 나는 오류를 렌더링하는 경우 renderInput()를 통해

const renderInput = (field) => { 
    const { meta: { touched, error } } = field 

    return (
     <div> 
      <input type={field.type} placeholder={field.placeholder} {...field.input} /> 
      <div className="inputErrorText"> 
       {touched ? error : ''} // this doesnt work due to my CSS 
      </div> 
     </div> 
    ) 
} 

// ...inside the Container: 

<div className="ui left icon input"> 
    <i className="user icon"></i> 
    <Field 
     name="email" 
     component={renderInput} 
     type="text" 
     placeholder="Enter your Email" 
    /> 
</div> 

// Below is the old way I was doing it 
{/*email.touched && email.error && <div className="inputErrorText">{email.error}</div>*/} 

을의 CSS는, 때문에 어떤 위치의 상대 + 절대 이유의 모습에 엉망이됩니다 그래서 위의 코드 하단에있는 마지막 div 아래에 렌더링 오류가 필요합니다.

필드 오류를 renderInput() 및/또는 <form> 외부로 렌더링하는 방법을 어떻게 다룰 수 있습니까? 제 질문은 field 입력 매개 변수 renderInput()에 집중되어 있다고 생각합니다. 컨테이너 내부에서 어떻게 액세스 할 수 있습니까? 어디서나 this.props에서 사용할 수 있습니까?

Answer 1

방금 ​​작동했습니다. 이 소스 : Redux-form 6.0.0 access error outside Field component은 redux-form V6 & 구성 요소를 사용하는 방법을 보여줍니다.

거기에 표시된대로 작동시키지 못했습니다. 나는이 시점에서 완전히 확신하지는 않지만 모든 종류의 "cannot read property touched of undefined"을 던지고있었습니다. 나는 if (! fields)의 여러 조합을 destruction으로 반환하고 약 20 개의 다른 조합을 시도했으며 Object.keys()을 사용하여 반복 할 수 없었습니다. 내가 쉽게 fields.email.input 로그를 콘솔 수 있었고 모든 것을 볼 수 있지만 때로는 meta에 파고 시작, 그것은 가끔 값을 로깅했다하더라도 정의되지 않은 던지고 시작했다. 이상한 일은 untouched이었습니다. 항상 false이 아니고, undefined이 아니기 때문에 상당히 화를 냈습니다. 그러나 나는 빗나가 다.

위의 해결 방법을 사용하면 다른 사람에게 더 많은 행운이있을 수 있습니다. Fields은 Redux-form V6-7에서 오류를 제어하는 ​​데 사용하기를 원하는 사람입니다.

나는 그러나, 그것은 다음과 같이 작동하도록 않았다

import { reduxForm, Field, Fields } from 'redux-form' 

const fieldNames = [ 
    'email', 
    'password' 
] 

const renderInput = (field) => { 
    return (
     <input type={field.type} placeholder={field.placeholder} {...field.input} /> 
    ) 
} 

// inside the Container (class methods) 
renderEmailError({ email }) { 
    const { touched, error } = email.meta 
    if (touched && error) return <div className="inputErrorText">{error}</div> 
    return null 
} 

renderPasswordError({ password }) { 
    const { touched, error } = password.meta 
    if (touched && error) return <div className="inputErrorText">{error}</div> 
    return null 
} 

// Inside render function 
<div className="field"> 
    <div className="ui left icon input"> 
     <i className="user icon"></i> 
     <Field 
      name="email" 
      component={renderInput} 
      type="text" 
      placeholder="Enter your Email" 
     /> 
    </div> 
    <Fields names={fieldNames} component={this.renderEmailError} /> 
</div> 

X

내가 내 CSS는 단순히 않기 때문에 Field를 사용하여 "표준"구현 작업을 진행 할 수 없습니다 div가 입력과 함께 배치되는 것을 허용하지 않습니다. 아이콘을 입력 필드 위에 놓는 방식 때문에 CSS를 변경할 수 없습니다.

전체 'fieldset'을 renderInput() 함수로 이동시키면서 실험했지만, 안구를 클릭하여 안구 클릭 (passwordConfirm 필드 대신 UX 대체)을하면 onClick 핸들러 때문에 똑같이 붙어 버렸습니다. 클래스 외부에서 구성 요소 상태를 업데이트 할 수 없었으며 클래스 외부에서 제대로 함수를 호출 할 수 없었습니다.

또한, 나 또한 그것이 보안 위험이 있기 때문에 document.querySelector('input').type를 사용 비밀번호 경우 당신이 입력의 유형을 조작 할 수 있다는 것을 배웠습니다.