使用带有formik的react自定义组件来处理onChange

Question

I use custom react component with formik which is handled by sending the value where I use it and setting its own state from its parent, so onChange I am always set its react state besides setFieldvalue to set it in formik as I dont use handleChange from formik props.

     <Field
    render={(fields: { field: object; form: formProps }) => {
        return (
            <TextField
            name="title"
            error={errors.title && touched.title}
            value={title}
            onKeyUp={() => null}
            onBlur={handleBlur}
            onChange={(e: { target: { value: string } }) =>
                this.props.onChange('title', e, fields.form)
            }
            placeholder="e.g Introduction to UX Design"
            />
        );
    }}
/>

onChange = (
    stateField: string,
    e: { target: { value: string } },
    form: { setFieldValue: (field: string, value: string) => void }
) => {
// the field is controlled twice here
    form.setFieldValue(stateField, e.target.value);
    this.setState({ [stateField]: e.target.value });
};

it is working correct but it is a hassle for me to handle the two cases in each field and I am not feeling it is the best way to do so, any help ?

Answer 1

Why do you need to control the value twice? Can you not lift it out of the form state when required, rather than storing in the component state? If you explain the use case more, I think someone will suggest a better way of tackling the problem.