如何允许用户在 React 中创建新字段 select

Question

我有一个由 react-hook-form 创建的表单，我有一个多 select 字段，用户可以在其中 select 多个字段。现在，我想允许用户添加任何不在列表中的新选项：

我的代码：

import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import Select from "react-select";

export function App() {
  const schema = Yup.object({
    name: Yup.string().required().min(3).max(191).label("Collection Name"),
    marketplaces: Yup.mixed().nullable().label("Marketplaces")
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
    control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = async (input) => {
    console.log("input", input);
  };

  const marketplace_options = [
    { label: "aut", value: 1 },
    { label: "nobis", value: 2 },
    { label: "nostrum", value: 3 },
    { label: "reprehenderit", value: 4 },
    { label: "unde", value: 5 },
    { label: "est", value: 6 },
    { label: "amet", value: 7 },
    { label: "dolores", value: 8 },
    { label: "tempora", value: 9 },
    { label: "occaecati", value: 10 },
    { label: "recusandae", value: 11 }
  ];

  const item = {
    id: 12,
    name: "test-collection",
    marketplaces: [
      {
        label: "amet",
        value: "7",
        pivot: { collection_id: 12, marketplace_id: 7 }
      },
      {
        label: "tempora",
        value: "9",
        pivot: { collection_id: 12, marketplace_id: 9 }
      }
    ]
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("name")}
        placeholder="Name"
        defaultValue={item.name}
      />
      <Controller
        name="marketplaces"
        control={control}
        defaultValue={item.marketplaces}
        render={({ field }) => (
          <Select
            {...field}
            options={marketplace_options}
            isMulti
            className="form-control w-full"
          />
        )}
      />
      <input type="submit" />
    </form>
  );
}

我想允许用户创建新选项，如果列表中没有，我该怎么做。

我的sandbox link:

我正在使用 react-hook-form 和 react-select，对 React 完全陌生，所以不太了解...

Answer 1

使用 react-select 库中的“可创建”组件

这将允许您在键入所需选项时即时创建选项。

https://codesandbox.io/s/react-hook-form-js-forked-vdfr8i?file=/src/App.js

如何允许用户在 React 中创建新字段 select

How to allow user to create a new field in react select

reactjs

react-select

react-hook-form