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

Question

使用下一个命令:

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

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

Answer 1

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

无论如何，想法是:您可以将 background 保留为按钮组件中的状态，并附加 onMouseEnter 和 onMouseLeave 监听器以更改state 相应。然后，您可以依靠 React 为您完成剩余的肮脏的重新渲染工作。

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

但是，使用 styled-components 可以提高性能，因为它不使用内联 CSS。这种方法也更加清晰和简洁。因此，如果您可以选择使用 styled-components 等外部库，请务必检查一下。

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