React MUI：对话框焦点问题内的TextArea答案

【问题标题】：React MUI: TextArea inside dialog focus issuesReact MUI：对话框焦点问题内的TextArea
【发布时间】：2020-07-20 17:33:16
【问题描述】：

我正在尝试让多行 TextField 在对话框组件中正常工作。

我已经为这个特定问题苦苦挣扎了一段时间，我不确定这个问题是否与 MUI 相关，或者可能与我的页面（对话框）如何在响应中重新呈现有关。

请参阅链接的非工作示例。 HERE

我也测试了许多其他方法，例如重组我的代码，在备忘录中包装东西等等。但无济于事......

目前发生了 3 件事中的 1 件事。

1.) 没有自动对焦 => 无法输入

2.) 使用自动对焦 => 可以解决问题...当失去焦点时，输入会闪烁

3.) 使用自动对焦+多行...输入也会失去焦点（重新获得焦点，但光标是输入的开头）

理论

我认为这可能是 React MUI 中的一个错误，并且已经为它创建了一个 bug ticket，但我想排除它可能不是其他东西，例如我编写对话框代码的方式，例如，没有记住正确的事情，状态导致更新它不应该等等......

【问题讨论】：

您是否尝试过将这两个状态分开？我猜原因与每次有输入时重置条件渲染状态时重新渲染有关。
只是为了澄清你建议[comment, setComment] = useState('') vs useState({ something: '', comment: '' })...我确定我有...但我会再次检查。
@keikai。这是一个具有分裂状态的分叉......而且似乎也发生了同样的事情。 codesandbox.io/s/react-mui-dy5km

标签： reactjs material-ui react-material

【解决方案1】：

问题与提取的 Content 内部组件有关...添加自动对焦通过在每次按键时将焦点添加回新创建的元素来掩盖问题。

我做了一个小测试，删除了所有内部代码块，只保留了基本的 jsx，问题就消失了。（也不再重新渲染，从而证实了我的怀疑）

然后我将其添加回来，然后只记住了“内容”部分。

一旦我记住它，它就解决了所有重新渲染的问题。我不知道我最初是怎么错过的，但我把它写下来是为了迷失在寻找问题的过程中：/

  const Content = useMemo(
    () =>  <Grid>... previous jsx</Grid>,
    [
      ReasonChips,
      feedback.comment,
      feedback.reason,
      isEditing,
      onSubmitClick,
      ratingOptions.length,
    ]
  );

【讨论】：

【解决方案2】：

只需使用 DialogContent 包装您的输入

【讨论】：

嗨 Zouari :) 我已经解决了这个问题，请参阅下面的答案。我最终联系了 MUI 的贡献者，他们指出问题是输入不断被重新渲染。 github.com/mui-org/material-ui/issues/20466。因此解决方案是记忆/防止重新渲染。但是，也许如果您有一个工作示例（您的答案），那么看到我之前提供的替代解决方案可能会很好？一切顺利:)