可编辑的 React-MaterialUI TextField 组件
Editable React-MaterialUI TextField component
我正在使用 Material-UI 和 React 创建一个 可编辑文本字段。
当您位于文本字段之外时，它看起来像 div 或 span 元素：
但是当你mouseover它时，会出现一个编辑图标：
当您点击它时，消息会变成一个经典的文本字段：
我遇到的问题是一切正常，除了我无法点击编辑图标（它变成 闪烁）
我正在分享我已经做过的事情：https://codesandbox.io/s/jny3704v63
我知道问题的根源，但我不知道如何解决！问题是，当您 mouseover 编辑图标时，我们处于文本字段的 mouseout 事件中，并且将执行 handleMouseOut 函数。
您可以通过评论handleMouseOut的内容来检查，但是当您离开文本字段时图标不会消失！
有什么想法吗？
您可以使用 onMouseEnter 和 onMouseLeave 代替 onMouseOver 和 onMouseOut 来解决此问题。您可以在此处了解差异：https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave
我正在使用 Material-UI 和 React 创建一个 可编辑文本字段。
当您位于文本字段之外时，它看起来像
div或span元素：但是当你
mouseover它时，会出现一个编辑图标：
当您点击它时，消息会变成一个经典的文本字段：
我遇到的问题是一切正常，除了我无法点击编辑图标（它变成 闪烁）
我正在分享我已经做过的事情：https://codesandbox.io/s/jny3704v63
我知道问题的根源，但我不知道如何解决！问题是，当您
mouseover编辑图标时，我们处于文本字段的mouseout事件中，并且将执行handleMouseOut函数。您可以通过评论
handleMouseOut的内容来检查，但是当您离开文本字段时图标不会消失！
有什么想法吗？
您可以使用 onMouseEnter 和 onMouseLeave 代替 onMouseOver 和 onMouseOut 来解决此问题。您可以在此处了解差异：https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave