可编辑的 React-MaterialUI TextField 组件

Question

我正在使用 Material-UI 和 React 创建一个可编辑的文本字段。

• 当您在文本字段之外时，它看起来像 div 或 span 元素：

• 但是当你mouseover它时，会出现一个编辑图标：

• 当你点击它时，消息就像一个经典的文本字段：

• 我遇到的问题是一切正常，除了我无法点击编辑图标（它变成 闪烁）

• 我正在分享我已经做过的事情：https://codesandbox.io/s/jny3704v63

• 我知道问题的根源，但我不知道如何解决！问题是当你mouseover编辑图标时，我们在文本字段的mouseout事件中，handleMouseOut函数会被执行。

• 您可以通过评论handleMouseOut的内容来检查，但是离开文本字段时图标不会消失！

有什么想法吗？

Answer 1

您可以通过使用onMouseEnter 和onMouseLeave 而不是onMouseOver 和onMouseOut 来解决此问题。您可以在此处了解不同之处：https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave