Question

使用下一个命令：

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

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

Answer 1

除非您使用像styled-components这样的外部 css-in-js 库，否则我认为有一种方法可以在不使用纯React的有状态组件的情况下执行此操作。< / p>

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

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

但是，使用样式组件进行此类操作更具性能，因为它不使用内联CSS。这种方法也更加清晰简洁。因此，如果您可以选择使用外部库，例如样式组件，请务必查看。

这是样式组件的一个小演示：https://codesandbox.io/s/9rZkQ0BpJ

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

1 个答案: