如何使用React在鼠标移过按钮时更改按钮的颜色？

随着下一个命令：如何使用React在鼠标移过按钮时更改按钮的颜色？

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

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

来源

2017-05-05 Jose Cabrera Zuniga

http://stackoverflow.com/questions/28365233/inline-css-styles-in-react-how-to-implement-ahover –

相关，我相信是的......容易......我不这么认为 –

你在“cmd里面”是什么意思？ – absolutezero

我不认为有没有办法做到这一点，没有使用有状态的组件与纯粹的反应，除非你使用外部css-in- js库，如styled-components。

不管怎么说，这个想法是：你可以保持background作为按钮组件的状态和连接onMouseEnter和onMouseLeave听众相应地更改state。然后，您可以依靠React为您完成其他肮脏的重新渲染工作。

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

然而，对于这种事情使用风格组件是更好的性能，因为它不使用内联CSS。这种方法也更加简洁明了。因此，如果您可以选择使用风格组件等外部库，请务必检查一下。

下面是风格组件有点演示：https://codesandbox.io/s/9rZkQ0BpJ

来源

2017-05-06 07:54:23 absolutezero

如何使用React在鼠标移过按钮时更改按钮的颜色？

回答

相关问题