reactjs 使用Formik自动完成MUI-将数据传递给Formik

o75abkj4  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(161)

我正在使用MUI自动完成组件,我想使用formik验证内容。通过一个简单的文本输入很容易,在onChange事件上传递formik. handleChange。相反,使用自动完成,这是不工作的。有人能帮助我吗?
使用onGenderChange函数,我至少可以设置组件的内部状态,并且console.log所选的值。是否可以从这里使用formik. handleChange来触发我在父组件中准备好的验证?

<TextField
    id="firstName"
    name="firstName"
    label="Nome"
    fullWidth
    autoComplete="off"
    variant="standard"
    value={formik.values.firstName}
    onChange={formik.handleChange}
    error={Boolean(formik.errors.firstName)}
    helperText={formik.touched.firstName && formik.errors.firstName}
/>
<Autocomplete
    name="gender"
    id="gender"
    disablePortal
    getOptionLabel={(option) => option || ""}
    options={["Maschio", "Femmina", "Altro"]}
    renderInput={(params) => <TextField {...params} variant="standard" label="Genere" fullWidth />}
    value={this.gender}
    onChange={this.onGenderChange}
    error={Boolean(formik.errors.gender)}
    helperText={formik.touched.gender && formik.errors.gender}
/>

onGenderChange = (event, value) => {
    this.setState({
        gender: value
    }, () => {
        console.log(this.state.gender);
    });
}
bmp9r5qi

bmp9r5qi1#

它没有更新formik状态,因为自动完成onChange具有不同的结构,event属性没有formik handleChange函数需要的值。因此,有两种方法可以修复:
1.为formik handleChange构造正确的事件

onChange={(e, value) => {
 const event = {...e, target: { ...e.target, name: "gender", value: value }};
 formik.handleChange(event);
}}

2 -使用格式设置字段值

onChange={(e, value) => formik.setFieldValue("gender", value)}

相关问题