Material-UI 自动完成的 React-Hook-Form setValue 不起作用

Question

我正在使用 React-Hook-Form 和 Material-UI 构建一个表单。每个 Material-UI 表单组件都被包装到一个react-hook-form Controller 组件中。

用户可以选择在单击按钮时使用不同的预定义值集自动填充表单。我正在尝试使用它setValue()来实现这一点，它似乎对于文本输入和选择工作得很好。但是，对于自动完成，尽管提交表单时已正确发送新值，但不会呈现新值。此外，当呈现文本区域时，内容似乎与标签混合在一起。

这是一个完整的示例： CodeSandbox 链接

Answer 1

AutoComplete您需要通过将 value 属性传递给组件来控制 的值AutoComplete，但是由于您使用的是字符串值，因此您无法直接传递值，您应该像这样AutoComplete找到目标：option

<Autocomplete
      ...
      value={typeof value === 'string' ? options.find(o => o.name === value) : (value || null)}
    />

出现 textarea 问题是因为您的默认值为 ，undefined并且材质将文本视为uncotrolled输入，要解决此问题，您可以在 value 为 时传递空字符串undefined，如下所示：

<TextField
        ...
        value={value || ''}
        ...
  />