[英]Formik form with custom material UI component not calling onChange function
I have a formik field like below and I want to call an onChange function which is using the event.target.value.我有一个如下所示的 formik 字段,我想调用一个使用 event.target.value 的 onChange function。 When I use materialUI's TextField component it works fine, but I use custom component the function doesn't get called.当我使用 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
/>
Below is my code for the customer text field component下面是我的客户文本字段组件的代码
const TextFieldCustom = ({ label, disabled, ...props }) => {
const classes = useStyles();
const [field] = useField(props);
return (
<TextField
{...field}
disabled={disabled}
margin="dense"
label={label}
variant="outlined"
/>
);
};
I am very sure I got the custom component wrong, but I don't know what do I need to add to make it work.我很确定我弄错了自定义组件,但我不知道我需要添加什么才能使其工作。
Use formik render props使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.