如何使用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文件)
答
我不认为有没有办法做到这一点,没有使用有状态的组件与纯粹的反应,除非你使用外部css-in- js库,如styled-components。
不管怎么说,这个想法是:你可以保持background
作为按钮组件的状态和连接onMouseEnter
和onMouseLeave
听众相应地更改state
。然后,您可以依靠React为您完成其他肮脏的重新渲染工作。
演示:https://codesandbox.io/s/PZB1ZxMBy
然而,对于这种事情使用风格组件是更好的性能,因为它不使用内联CSS。这种方法也更加简洁明了。因此,如果您可以选择使用风格组件等外部库,请务必检查一下。
下面是风格组件有点演示:https://codesandbox.io/s/9rZkQ0BpJ
http://*.com/questions/28365233/inline-css-styles-in-react-how-to-implement-ahover –
相关,我相信是的......容易......我不这么认为 –
你在“cmd里面”是什么意思? – absolutezero