Formik， React-Select & Multiple Variables

Question

我完全搞不清楚这个问题。我有一个现有的选择，与formik &反应-选择，但我不能让它作为一个多工作。以下是我目前的记录:

import Select from 'react-select';
import { useField } from 'formik';
export default function SelectField(props) {
const [field, state, { setValue, setTouched }] = useField(props.field.name);
const onChange = ({ value }) => {
setValue(value);
};
return <Select {...props} onChange={onChange} onBlur={setTouched} />;
}

和

<Field
component={SelectField}
name="campfeatures"
options={selectObjects}
/>

我如何把它变成能够采取多重选择?如果我添加isMulti字段，它"工作";但是它实际上并不保留多个值。

谢谢你的帮助!

Answer 1

当react-select接收到从单个对象到对象列表的isMulti时，onChange的参数类型发生变化。当使用isMulti时，你不需要销毁;第一个参数是值

您还希望通过管理value使react-select成为受控组件。

export default function SelectField(props) {
const [field, state, { setValue, setTouched }] = useField(props.field.name);

// value is an array now
const onChange = (value) => {
setValue(value);
};
// use value to make this a  controlled component
// now when the form receives a value for 'campfeatures' it will populate as expected
return <Select {...props} value={state?.value} isMulti onChange={onChange} onBlur={setTouched} />;
}

新值是带有标签和值字段的选定选项的数组。如果你只想存储值，你需要将它映射到一个值，并修改react-select来处理