使用 React-Hook-Form 和 Typescript 返回 React-Select 的值

Question

我正在使用带有react-select的react-hook-form控制器。我正在使用 React 和Typescript。我可以在提交时获取选定的值，但它从选项数组中返回值和标签作为对象。如何仅返回值？这是代码，

const { handleSubmit, control, formState:{errors}} = useForm<IAddProductForm>();

const handleOnSubmit = (data:IAddProductForm) => {
        console.log(data);
    }

const categoryOptions = [
        {value:"Grocery", label:"Grocery"},
        {value:"Pharmacy", label:"Pharmacy"},
        {value:"Electronic", label:"Electronic"},
        {value:"Food", label:"Food"},
    ];

return(
        <React.Fragment>
           <Form onSubmit={handleSubmit(handleOnSubmit)}>
               <Controller
                   control={control}
                   render={({field:{onChange, value, name, ref}}) => (
                        <Select
                           inputRef={ref}
                           value={categoryOptions.find(c => c.value === value)}
                           options={categoryOptions}
                           onChange={onChange}
                        />
                   )}
                   name={"category"}
                />
               <Button type={"submit"}>submit</Button>
            </Form>
        </React.Fragment>
);

category: {value: "Grocery", label: "Grocery"}如果我选择 Grocery 并提交，此代码将返回此值。但我需要category:"Grocery"这样回来。

Answer 1

嘿，这实际上是更改您的更改函数并使用如下值的问题：

interface IAddProductForm {
  category: string;
}

interface ICategory {
  value: string;
  label: string;
}

function YourComp() {
const { handleSubmit, control, formState:{errors}} = useForm<IAddProductForm>();

    const handleOnSubmit = (data:IAddProductForm) => {
        console.log(data);
    }

    const categoryOptions: ICategory[] = [
        {value:"Grocery", label:"Grocery"},
        {value:"Pharmacy", label:"Pharmacy"},
        {value:"Electronic", label:"Electronic"},
        {value:"Food", label:"Food"},
    ];

    return(
        <React.Fragment>
           <Form onSubmit={handleSubmit(handleOnSubmit)}>
               <Controller
                   control={control}
                   render={({ field: { onChange, value, name, ref } }) => (
                     <Select
                      inputRef={ref}
                      value={categoryOptions.find((c) => c.value === value)}
                      name={name}
                      options={categoryOptions}
                      onChange={(selectedOption: ICategory) => {
                       onChange(selectedOption.value);
                      }}
                     />
                   )}
                   name={"category"}
                />
               <Button type={"submit"}>submit</Button>
            </Form>
        </React.Fragment>
);
}

如果您仔细观察，我只是为categoryOptions const 添加了一些类型，以便能够键入 onChange 函数并将其修改为如下所示。

onChange={(selectedOption: ICategory) => {
 onChange(selectedOption.value);
}}

基本上，收到的值是完整的对象，您只需提取它的值并将其传递给控制器​​ onChange 函数。另外，您通过传递值并使用数组 find 来匹配对象并使选择正常工作是正确的。

如果您提交，您应该能够看到 formData 返回一个仅包含字符串值的类别，而不是对象。

这是一个工作沙箱：https://codesandbox.io/s/boring-blackwell-qoer1