Geek Answers Handbook

Transfer of the reduction form to v6, onBlur and onChange

I am transferring the reduction form to the latest version 6.0.0rc3. In this version, the array of "fields" was gone and replaced by the Field component (see http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/ ). I used the default onBlur function extension in v5 as follows:

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

However, the new version of this can no longer be done, because this.props.fields does not exist.

From what I found in the docs, a new way would be to create a component for each form field that has an excellent function, and extend the onBlur function:

 _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(); }} /> ); }

This is fine, except that I need to create a new element for each field that should do something else when a blur event occurs. In some fields, I have to make an API call that I make by sending an action. For example, I have to do this to get the address. In these components, I have to connect my store, so it connects many times.

I tried passing my custom function from the parent to the Field component, for example:

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

and get both functions in my component from the props:

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

This did not work correctly due to the new React warning .

Is there a better way to do this?

+6
source share
2 answers

I ended up creating a custom component for each form field that has an onChange or onBlur function. This way you can run both functions, so all the default actions are called to reduce.

 // 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" />
+1
source

The docs say this

props: object [optional]

An object with custom details for passing through the Field component to the component provided by the prop component. This attribute will be combined with the details provided by the field itself. This can be useful if you are using TypeScript. This design is completely optional; The main way to transfer details together with your component is to transfer them directly to the Field component, but if for any reason you prefer to associate them with a separate object, you can do this by transferring them to the details.

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

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

Perhaps try this. This will probably prevent the error. Or pull out your function before it is transferred to the input.

0
source

More articles:


All Articles