使用formik如何在选择TypeAhead字段时向formik值添加值



我正在为我的表单使用formik,它带有一个TypeAhead字段,允许用户选择对象数组。选择时,我希望使用对象数组更新Formik值。选择formik值后,如何更新该值?我试过setFieldValue,但是怎么能用这种方式呢?

<Formik
initialValues={{
driverList: [
{
id:'',
firstName: '',
lastName: '',
smsPhone: '',
email: ''
}
],
}}
validationSchema={Yup.object({
activateAccount: Yup.boolean()
.required('Required')
.oneOf([true], 'Account must be activated.'),
})}
onSubmit={values => {
alert(JSON.stringify(values, null, 4));
console.log(values)
}}
>
{({handleSubmit, setFieldValue, values}) => (
<div>
<Card className="callSupportCard">
<Card.Body>
<Card.Title className="callSupportTitle">
Account Activation
</Card.Title>
<Card.Subtitle className="callSupportCheckBox">
The customer has started to setup up his/her account but could not finish.
</Card.Subtitle >
<p className="callQuestion">{" "}<b>Step 1:{" "}</b> Ask for their first and last name.</p>
<Form onSubmit={handleSubmit}>
<Typeahead className="driverInput" id="driversInfo" 
labelKey={(option) => `${option.firstName} ${option.lastName}, ${option.smsPhone}, ${option.email}`}
onChange={setSelected} 
options={options} 
selected={selected}
placeholder="Choose an driver..." 
/>

解决方案是:

<Typeahead 
labelKey={(option) => `${option.firstName} ${option.lastName},  ${option.phone}, ${option.email}`}
onChange={(selected) => {
if(selected.length > 0)
{setFieldValue('firstName', selected[0].firstName);
setFieldValue('lastName', selected[0].lastName);
setFieldValue('smsPhone', selected[0].phone);
setFieldValue('email', selected[0].email);
setFieldValue('suspended', selected[0].suspended);
}}}
options={options} 
placeholder="Choose an person..." 
/>

最新更新