具有自定义材质 UI 组件的 Formik 表单未调用 onChange function

Question

我有一个如下所示的 formik 字段，我想调用一个使用 event.target.value 的 onChange function。 当我使用 materialUI 的 TextField 组件时它工作正常，但我使用自定义组件 function 不会被调用。

<Field
name="jobId"
label="Job ID ID"
value={values.jobId}
onChange={e => customChange(event, setFieldValue)}
as={TextField} //does not work when I use TextFieldCustom instead
/>

下面是我的客户文本字段组件的代码

const TextFieldCustom = ({ label, disabled, ...props }) => {
    const classes = useStyles();
    const [field] = useField(props);  
    return (
        <TextField
            {...field}
            disabled={disabled}
            margin="dense"
            label={label}
            variant="outlined"
        />
    );
};

我很确定我弄错了自定义组件，但我不知道我需要添加什么才能使其工作。

CodeSanbox 链接

Answer 1

使用 formik 渲染道具

     <Formik
    initialValues={{ name: "", jobId: "" }}
    onSubmit={(values, actions) => {
      console.log(values);
    }}
  >
    {({ values, setFieldValue, handleChange, handleSubmit }) => (
      <Form>
        <Field
          name="jobId"
          label="Job ID ID"
          value={values.jobId}
          render={({ field }) => {
            return (
              <TextFieldCustom
                {...field}
                onChange={event =>
                  setFieldValue(field.name, event.target.value)
                }
              />
            );
          }}
        />
      </Form>
    )}
  </Formik>