Formik、React-Select 和多变量

Question

在解决这个问题时我完全迷路了。我有一个现有的 select 可以与 formik & react-select 一起使用，但我无法让它作为一个 multi 来工作。这是我目前所拥有的：

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}
            />

我如何将它变成能够接受多个 select？如果我将 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 来处理

Formik、React-Select 和多变量

Formik, React-Select & Multiple Variables

reactjs

react-select

next.js

formik