使用formik在多选中进行react自动完成验证时出现问题

Question

我正在尝试使用formik验证自动完成多选。第一次它是在点击按钮上工作，但当我删除选定的值时，它就不是验证。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from "formik";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";
import * as Yup from 'yup';
const cities = [{
state: "Illinois",
name: "Chicago",
id: 3,
}, {
state: "Texas",
name: "Houston",
id: 2
}, {
state: "California",
name: "Los Angeles",
id: 1
}, {
state: "New York",
name: "New York City",
id: 4
}];
const initialValues = {
city_id: '',
};

const submit = values => {
let city=JSON.parse(values.city_id);
};

const SignupForm = () => {
return (
<Formik initialValues={initialValues}
validationSchema = {
Yup.object().shape({
city_id: Yup.string().max(255).required('City is required')
})
}
onSubmit={submit}>
{({ handleChange,touched,errors, values, setFieldValue }) => (
<Form>
<Autocomplete
multiple
id="city_id"
name="city_id"
options={cities}
getOptionLabel={option => option.name}
style={{ width: 300 }}
onChange={(e, value) => {
console.log(value);
let val=JSON.stringify(value);
setFieldValue(
"city_id",
value !== null ? val : initialValues.city_id
);
}}
renderInput={params => (
<TextField
error={Boolean(touched.city_id && errors.city_id)}
helperText={touched.city_id && errors.city_id}
margin="normal"
label="Cities"
fullWidth
name="city_id"
{...params}
/>
)}
/>
<Button variant="contained" color="primary" type="submit">
Submit
</Button>
</Form>
)}
</Formik>
);
}
export default SignupForm;

如果我犯了错误，请提供更好的验证选项。

Answer 1

验证将不会运行，因为value从不为空。

如果你想运行验证，请执行：

setFieldValue(
"city_id",
value
);

上面的代码将触发验证，因为删除时value将是""。