Question

我正在尝试对 Formik 使用 react-select（带有多值），但不确定如何反映在我的 Formiks initialStates 值中选择的值。

我有以下几点：

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 将与来自 handleChange 的 Formik 事件匹配。

<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 时设置初始状态值

1 个答案: