要实现按钮上的ReactJS图标不改变,可以使用React的条件渲染功能。以下是一个示例代码:
import React, { useState } from 'react';
import { FaReact } from 'react-icons/fa';
const ButtonWithIcon = () => {
const [isClicked, setIsClicked] = useState(false);
const handleClick = () => {
setIsClicked(!isClicked);
};
return (
);
};
export default ButtonWithIcon;
在这个示例中,使用useState
来定义一个名为isClicked
的状态变量,并且初始值为false
。在点击按钮时,调用handleClick
函数来切换isClicked
的值。根据isClicked
的值,按钮的文本将会改变。而
则是用来显示ReactJS图标的组件。
这样,每次点击按钮时,按钮的文本会在"Button"和"Button Clicked"之间切换,而ReactJS图标则始终保持不变。