Question

我有一个包含react-select字段的formik表单，所以我的问题是我还有另一个字段和按钮会影响react-select组件的默认值，因此我尝试使用setFieldValue函数表单formik，但这确实会更改表单值，但不会显示选择中的选项

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

对此有任何想法

Answer 1

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

为此，我做了以下更改

将选项列表创建为useState钩子，以便我们可以相应地更改列表

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

并在setOptions函数中调用handleAddOption。

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

我在value字段中更改了Select道具。以便可以将正确的值传递给该函数。因为您正在name函数中传递setFieldValue。

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

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

使用formik设置字段值以从外部按钮反应选择组件

1 个答案: