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

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 道具控制它的值。

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

在设置输入值后修改字段的值将使其正常工作，但我需要它来识别值在不修改值的情况下发生了变化。

如何让它正确识别输入值已更改？

故障状态下的图像示例：

Answer 1

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

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

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

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

Material-UI TextField state incorrect after uncontrolled value change with react-hook-form

reactjs

material-ui

react-hook-form