当鼠标移动到按钮上时如何使用 React 更改按钮的颜色？

【问题标题】：how to change the color of a button when a mouse moves over it using React?当鼠标移动到按钮上时如何使用 React 更改按钮的颜色？
【发布时间】：2017-10-04 12:31:46
【问题描述】：

使用下一条命令：

function createCustomInsertButton (onClick) {
  return (
    <button style={ { color: 'yellow', padding: '5px', paddingBottom : '6px', border: '1px', background:'red' } } onClick={ onClick }>Add New User</button>
  );
}

我创建了一个红色按钮，但每次鼠标经过它时，它的颜色都保持红色。这可以在cmd内部更改吗？我的意思是，如果我的鼠标移到按钮上，它的颜色会变成浅红色吗？限制是，我只能使用与反应相关的东西（没有外部 CSS 文件）

【问题讨论】：

stackoverflow.com/questions/28365233/…
相关，我相信是的...容易...我不这么认为
“在 cmd 内部”是什么意思？

标签： css reactjs ecmascript-6

【解决方案1】：

我认为如果不使用带有纯 React 的有状态组件就没有办法做到这一点，除非你使用像 styled-components 这样的外部 css-in-js 库。

无论如何，想法是：您可以将background 作为按钮组件中的状态并附加onMouseEnter 和onMouseLeave 侦听器以相应地更改state。然后你就可以依靠 React 为你完成剩下的重渲染工作了。

演示：https://codesandbox.io/s/PZB1ZxMBy

然而，使用 styled-components 来处理这种事情会更高效，因为它不使用内联 CSS。这种方法也更加清晰和简洁。因此，如果您可以选择使用 styled-components 等外部库，请务必检查一下。

这是 styled-components 的一个小演示：https://codesandbox.io/s/9rZkQ0BpJ

【讨论】：