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

Question

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

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

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

Answer 1

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

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

您的文本区域出现问题是因为您的默认值为 undefined 并且 material 将文本区域视为 uncotrolled 输入，要解决此问题，您可以在值为 [= 时传递空字符串16=]，像这样：

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

React-Hook-Form setValue for Material-UI Autocomplete doesn't work