可编辑的 React-MaterialUI TextField 组件

Question

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

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

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

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

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

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

• 我知道问题的根源，但我不知道如何解决！问题是，当您mouseover编辑图标时，我们处于mouseout文本字段的事件中，并且该handleMouseOut功能将被执行。

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

任何的想法 ？

Answer 1

您可以使用onMouseEnterandonMouseLeave代替onMouseOverand来解决此问题onMouseOut。您可以在此处阅读差异：https : //javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave