MUI (JoyUI) 使用 react-hook-form 自动完成：返回与 label 不同的值

Question

我正在使用 JoyUI（材料）自动完成和 react-hook-form 来处理表单。 我有这个 object 数组供我选择：

[
    { label: "Todo", param: "TODO" },
    { label: "In Progress", param: "IN_PROGRESS" },
    { label: "Ended", param: "ENDED" },
]

Param 是我要返回的值 API 和 label 是我要在自动完成中显示的值

是否可以显示 label 但向 react-hook-form（参数）返回不同的值。

像 HTML 选项 select（示例）：

<select>
    {list.map(item => (<option key={item.param} value={item.param}>{item.label}</option>))}
</select>

我的输入组件：

export const Input = ({label,type,param,validation,list,register}) => (
<FormControl>
    <FormLabel>
        {label}
    </FormLabel>
    <Autocomplete
          options={list}
          {...register(param, validation)} // react-hook-form register
      />

</FormControl>);```

Thanks, 

Answer 1

你可以使用getOptionLabel

 export const Input = ({label,type,param,validation,list,register}) => (
<FormControl>
    <FormLabel>
        {label}
    </FormLabel>
    <Autocomplete
          options={list}
          getOptionLabel={(option) => option.label} // this will show label in the dropdown
          {...register(param, validation)} // react-hook-form register
      />

</FormControl>);