Material-UI TextField状态在使用react-hook-form更改不受控制的值后不正确

Question

我有一个Material-UI TextField元素，如下所示

<TextField
    variant='outlined' fullWidth
    name={'webhook'}
    label={'Webhook URL'}
    defaultValue={state.webhook}
    error={errors.webhook !== undefined}
    helperText={errors.webhook && 'Not a valid webhook URL.'}
    inputRef={register({
        required: true,
    })}
/>

然后我使用react-hook-form控制输入的值。它说根据文档，它将与不受控制的输入一起使用，因为它通过useForm道具控制其值。

因此，当我使用''中的setValue将值从默认值useForm()（空字符串）设置为变量（非空字符串）提供的实际值时，输入标签将文本覆盖在文本字段的中心，而不是像带有值的输入一样移动到顶部。

在设置输入值之后修改字段的值将使其正常工作，但是我需要它来识别值的更改而无需修改值。

如何获取它以正确识别输入值已更改？

处于毛刺状态的图像示例：

Answer 1

您想看一下控制器：https://react-hook-form.com/api#Controller

这是一个代码框：https://codesandbox.io/s/react-hook-form-controller-079xx

<Controller name="test" control={control} as={TextField} />