redux-form을 v6, onBlur 및 onChange 함수로 마이그레이션

Question

저는 redux-form을 최신 버전 인 6.0.0rc3으로 마이그레이션하고 있습니다. 이 버전에서는 'fields'배열이 사라지고 Field 구성 요소로 바뀝니다 (http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/ 참조). 나는이 같은 V5의 기본 및 onblur 기능을 확장하는 데 사용 :

const { user_zipcode } = this.props.fields; 
onChange={ 
    val => user_zipcode.onChange(this._handleZipcodeChange(val)) 
} 

그러나이 더 이상 수행 할 수없는 새로운 버전, this.props.fields이 존재하지 않기 때문에. 나는이 문서에서 발견 된 것과

, 새로운 방법은 거기에 onblur 기능을 별개의 기능이있는 모든 양식 필드에 대한 구성 요소를 작성하고 확장 할 수 있어야한다 :

_onBlur() { 
    // my custom blur-function 
} 

render() { 
    const { input, touched, error } = this.props; 
    return (
    <input 
     className={styles.input} 
     {...input} 
     onBlur={() => { 
     // 2 functions need to be called here 
     this._onBlur(); 
     input.onBlur(); 
     }} 
    /> 
); 
} 

이 제외, 괜찮습니다 blur 이벤트가 발생할 때마다 다른 작업을 수행해야하는 각 필드에 대해 새 요소를 만들어야합니다. 일부 필드에서는 API를 호출해야하는데, 액션을 전달하면됩니다. 예를 들어 주소를 얻으려면이 작업을 수행해야합니다. 이 구성 요소에서는 상점을 연결해야하므로 여러 번 연결됩니다.

<Field 
    type="text" 
    name="user_zipcode" 
    component={Zipcode} 
    onBlurFunction={this._myBlurFunction} 
/> 

및

소품에서 내 구성 요소의 기능을 모두 받고 :

... 
onBlur={() => { 
    input.onBlurFunction(); 
    input.onBlur(); 
}} 
... 

이 didn를 '

나는 다음과 같이 필드 구성 요소에 부모로부터 내 사용자 지정 기능을 전달하는 시도 새 React warning으로 인해 올바르게 작동하지 않습니다.

더 좋은 방법이 있나요? 사용자 정의 소품

개체 구성 요소 소품에 제공하는 구성 요소에 필드 구성 요소를 통해 전달하는 [선택 사항] 대상 : 워드 프로세서에서

Answer 1

onChange 또는 onBlur 기능이있는 모든 양식 필드에 대한 사용자 지정 구성 요소를 만드는 것으로 끝 맺었습니다. 이렇게하면 두 함수를 모두 실행할 수 있으므로 모든 기본 redux-form 작업이 호출됩니다.

// Licenceplate-component 

export default class Licenceplate extends Component { 

    _handleBlur = ({ currentTarget: { value } }) => { 
     // my blur function 
    } 

    render() { 
     const { 
      input, 
      meta: { touched, error } 
     } = this.props; 

     return (
      <div className={styles.wrapper}> 
      <input 
       {...input} 
       type="text" 
       onBlur={ 
       e => input.onBlur(this._handleBlur(e)) 
       } 
      /> 

     </div> 
     ); 
    } 
} 


// In my form-component 
<Field 
    component={Licenceplate} 
    name="car_licenceplate" 
    type="text" 
/> 

Answer 2

는이

소품 말한다. 이 소품은 필드 자체가 제공하는 소품과 병합됩니다. TypeScript를 사용하는 경우 유용 할 수 있습니다. 이 구성은 완전히 선택 사항입니다. 소포를 구성 요소로 전달하는 주된 방법은 직접 필드 구성 요소에 전달하는 것입니다. 그러나 어떤 이유로 든 별개의 객체로 묶는 것을 선호한다면 소품으로 전달하여 소품을 전달할 수 있습니다.

http://redux-form.com/6.0.0-rc.3/docs/api/Field.md/

<Field component={renderField} props={{ disabled: true }} /> 

아마 한 것을보십시오. 아마 오류를 막을 것입니다. 또는 입력에 전달되기 전에 함수 소품을 당깁니다.