如何允许用户在 React 中创建新字段 select
How to allow user to create a new field in react select
我有一个由 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 完全陌生,所以不太了解...
使用 react-select 库中的“可创建”组件
这将允许您在键入所需选项时即时创建选项。
https://codesandbox.io/s/react-hook-form-js-forked-vdfr8i?file=/src/App.js
我有一个由 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 完全陌生,所以不太了解...
使用 react-select 库中的“可创建”组件
这将允许您在键入所需选项时即时创建选项。
https://codesandbox.io/s/react-hook-form-js-forked-vdfr8i?file=/src/App.js