Formik，React-Select & Multiple Variable

Question

当涉及到弄清楚这一点时，我完全迷惑了。我有一个现有的select可以与formik & react-select一起使用，但是我不能让它作为一个多项来工作。这是我到目前为止所知道的：

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时，您不需要析构；第一个参数是值。

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

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以处理此问题