使用 formik 将字段值设置为来自外部按钮的 react-select 组件

Question

我有一个包含 react-select 字段的 formik 表单，所以我的问题是我有另一个字段和按钮可以影响 react-select 组件的默认值，我尝试使用 setFieldValue函数形式 formik 但这确实改变了形式值，但 select 中的选项未显示

here de codeSandbox 我做了一个简单的例子来说明我正在尝试做的事情

对此有任何想法

Answer 1

据我了解，单击 Add option 按钮时，应在选项列表中添加一个新选项，并且该选项也将被标记为选中。

为此，我做了以下更改

Created the options list as useState hook so that we can alter list accordingly

 const [options, setOptions] = useState([
    { value: "options 1", label: "option 1" },
    { value: "options 2", label: "option 2" }
  ]);

并在 handleAddOption 函数中调用 setOptions。

 const handleAddOption = () => {
    setOptions([...options, { label: "test option", value: "test option" }]);
    return setFieldValue("name", "test option");
  };

I changed value prop in Select field. so that correct value can be passed to the function. because you are passing name in setFieldValue function.

 value={defaultValue(options, values.name)}

工作示例https://codesandbox.io/s/agitated-clarke-4pjdy

使用 formik 将字段值设置为来自外部按钮的 react-select 组件

Set field value with formik to react-select component from external button

reactjs

react-select

formik