使用 react-hook-form 在選擇菜單中設置默認值

Question

我正在嘗試在表單中從chakra-react-select設置選擇菜單的默認值，但我沒有成功實現這一點。

這是代碼：

<form onSubmit={handleSubmit(onSubmit)}>
                    <Flex justifyContent="space-between" mt={8}>
                        <Flex flexDir={"column"} justifyContent={"space-between"} align={"flex-start"}>
                            <Heading size={"sm"}>Prefix</Heading>
                            <Text color={"gray.300"}>Configure the prefix for the guild.</Text>
                            <Input
                                paddingTop={"1px"}
                                placeholder="Enter prefix here"
                                size='md'
                                {...register("prefix", { maxLength: { value: 5, message: "Max length exceeded" }, minLength: { value: 1, message: "Minimum length is 1" }, required: { value: true, message: "This field is required." } })}
                            />
                        </Flex>
                        <Flex flexDir={"column"} justifyContent={"space-between"} align={"flex-end"}>
                            <Heading size={"sm"}>Language</Heading>
                            <Text color={"gray.300"}>Configure the language for the guild.</Text>
                            <Controller
                                name="language"
                                control={control}
                                defaultValue="🇺🇸 English"
                                rules={selectMenuRules.language}
                                render={({ field }) => (
                                    <Select className='select-menu' options={availableLanguages} {...field} />
                                )}
                            />
                        </Flex>
                    </Flex>
                    <br />
                </form>

Answer 1

使用字符串🇺🇸 英語作為defaultValue似乎是個問題。 您可以嘗試使用類似availableLanguages[0].value作為defaultValue道具。

編輯：

您可以嘗試僅使用availableLanguages[0] 。 React Hook Form 高級用法部分也有一些使用控制器組件的 react-select 示例。 這些可能會有所幫助。

https://react-hook-form.com/advanced-usage