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

Question

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

我一直在努力解决这个特定问题一段时间，我不确定这个问题是否与 MUI 相关，或者可能与我的页面（对话框）如何重新呈现反应有关。

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

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

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

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

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

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

理论

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

Answer 1

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

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

然后我把它加回来，然后只记住了内容部分。

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

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

Answer 2

只需使用 DialogContent 包装您的输入