javascript - 如何在 react-hook-forms 中重置自动完成？

Question

我正在使用 react-hook-forms并尝试在提交后重置所有表单字段。问题是在我的例子中，自动完成接受对象作为值。

我尝试将 defaultValue 设置为 {}，但收到以下消息:

Material-UI: the getOptionLabel method of Autocomplete returned undefined instead of a string for{}

是否有任何可以重置自动完成的变体？

这是 CodeSandbox 的链接

Answer 1

聚会有点晚了，但如果其他人需要的话，这里有一个解决方案。

假设您的自动完成包含在 Controller 中，您所要做的就是明确检查自动完成中的值。更多内容请引用下方

<Controller
name="category"
control={control}
rules={{ required: true }}
render={({ field }) => (
    <Autocomplete
        fullWidth
        options={categories}
        {...field}
        // =====================================================
        // Define value in here
        value={
            typeof field.value === "string"
                ? categories.find((cat) => cat === field.value)
                : field.value || null
        }
        // =====================================================
        onChange={(event, value) => {
            field.onChange(value);
        }}
        renderInput={(params) => (
            <TextField
                {...params}
                label={t("product_category")}
                error={Boolean(errors.productCategory)}
                helperText={errors.productCategory && "Product Category is required!"}
            />
        )}
    />
)}
/>

这应该可以解决问题!