我正在使用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);
});
}
1条答案
按热度按时间bmp9r5qi1#
它没有更新formik状态,因为自动完成
onChange
具有不同的结构,event
属性没有formikhandleChange
函数需要的值。因此,有两种方法可以修复:1.为formik handleChange构造正确的事件
2 -使用格式设置字段值