如何使用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在鼠標移過按鈕時更改按鈕的顏色？

回答

相關問題