Question

我将自定义react组件与formik一起使用，该组件是通过在我使用它的位置发送值并从其父级设置其自身状态来处理的，所以onChange我总是设置其setresetvalue以外的其react状态以在formik中对其进行设置，因为我不使用它从formik道具更改handle。

     <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 });
};

这是正确的方法，但是处理每个领域的两个案件对我来说都是麻烦的，我觉得这不是最好的方法，有帮助吗？

Answer 1

为什么需要两次控制该值？您是否可以在需要时将其从表单状态中移出，而不是存储在组件状态中？如果您进一步解释用例，我认为有人会提出解决问题的更好方法。

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

1 个答案: