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

【问题标题】：React-Hook-Form setValue for Material-UI Autocomplete doesn't workMaterial-UI 自动完成的 React-Hook-Form setValue 不起作用
【发布时间】：2022-01-07 18:18:40
【问题描述】：

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

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

这是一个完整的例子： CodeSandbox Link

【问题讨论】：

标签： reactjs typescript material-ui react-hook-form

【解决方案1】：

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

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

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

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

【讨论】：

成功了。谢谢！
不客气。