AntDesign 是一个流行的 React UI 组件库,可以通过修改组件的样式来实现改变颜色的效果。下面是一个使用 AntDesign 的示例代码,演示了当按钮被点击时更改两种颜色的方法:
import React, { useState } from 'react';
import { Button } from 'antd';
const App = () => {
const [color, setColor] = useState('blue');
const handleClick = () => {
setColor(color === 'blue' ? 'red' : 'blue');
};
return (
);
};
export default App;
在上面的代码中,我们使用了 useState
钩子来创建一个名为 color
的状态变量,并将其初始值设置为 'blue'
。handleClick
函数会在按钮被点击时被调用,通过调用 setColor
函数来更新 color
的值。当按钮被点击时,color
的值会从 'blue'
切换到 'red'
,再次点击时则切换回 'blue'
。
通过将 style
属性设置为 { backgroundColor: color }
,我们可以通过修改按钮的背景颜色来实现颜色的改变效果。
这只是一个简单的示例,你可以根据实际需求修改代码,应用到你的项目中。