可编辑的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