Custom onChange in React Final Form

Let's take a case when we need to call our own function to change a state of a specific field in a form (our react final form).

Here is a way to do the exact that:

You should pass your function as a parameter and after that just call it inside of the onChange method

Example:

const FormGroupAdapter = ({ input, inputOnChange }) => {

    const inputProps = {

        ...input,

        onChange: e => {

            input.onChange(e);

            inputOnChange && inputOnChange(e);

        }

    };



    return <input {...inputProps} />;

};



const handleChange = event => {

    console.log("!!!", event.target.value);

};



const App = () => (

    <Form

        ...

        render={({ handleSubmit, reset, submitting, pristine, values }) => (

            <form onSubmit={handleSubmit}>

                <div>

                    <label>some label</label>

                    <Field

                        name="someField"

                        component={FormGroupAdapter}

                        inputOnChange={handleChange}

                    />

                </div>

                ...

            </form>

        )}

    />

);

Live example