在 Formik 中使用 react-select 时设置初始状态值

Question

我正在尝试将 react-select（具有多值）与 Formik 一起使用，但不确定如何在我的 Formiks initialStates 值中反映 selected 值。

我有以下内容：

import Select from 'react-select';

const myOptions= [
  { value: 'Food', label: 'Food' },
  { value: 'Being Fabulous', label: 'Being Fabulous' },
  { value: 'Unicorns', label: 'Unicorns' },
  { value: 'Kittens', label: 'Kittens' },
];


"props": {
    "myGroups": [
        {
            "myGroupName": "",
            "selectedOptions": []
        }
     ]
 }


<Select
   options={myOptions}
   isMulti={true}
   name={`myGroups.${index}.selectedOptions`}
/>

我能够正确填充 react-select 列表，但不确定我需要如何设置：myGroups.${index}.selectedOptions 来保存如下值：

"selectedOptions": [
                    "Food",
                    "Kittens"
                   ]

我假设我需要一个 onChange 函数调用和 Formik，还需要使用 setFieldValue

任何帮助都会很棒。

Answer 1

我以前在这个库上工作过，需要做和你做的完全一样的事情。

只需添加一个 onChange 事件。然后，有一个变量 e 将与来自 Formik.

的 handleChange 事件匹配

<Formik initialValues={initialFormValues} validationSchema={formSchema} onSubmit={this.handleFormSubmit} enableReinitialize>
    {({ handleSubmit, handleChange }) => (
        <Form noValidate onSubmit={handleSubmit} autoComplete='off'>
            <Select
                options={myOptions}
                isMulti={true}
                name={`myGroups.${index}.selectedOptions`}
                onChange={(selectedOption) => {
                    let e = { target: { name: `myGroups.${index}.selectedOptions`, value: selectedOption } };
                    handleChange(e);
                }}
            />
        </Form>
    )}
</Formik>

在 Formik 中使用 react-select 时设置初始状态值

Setting initial state values when using react-select with Formik

javascript

reactjs

react-select

formik