在单击按钮时,使用ReactJS可以通过以下步骤来更改所单击按钮的类名以及该组中的其他按钮:
import React, { useState } from 'react';
const ButtonGroup = () => {
const [activeButton, setActiveButton] = useState(null);
const handleButtonClick = (buttonName) => {
setActiveButton(buttonName);
};
return (
<div>
<button
className={activeButton === 'button1' ? 'active' : ''}
onClick={() => handleButtonClick('button1')}
>
Button 1
</button>
<button
className={activeButton === 'button2' ? 'active' : ''}
onClick={() => handleButtonClick('button2')}
>
Button 2
</button>
<button
className={activeButton === 'button3' ? 'active' : ''}
onClick={() => handleButtonClick('button3')}
>
Button 3
</button>
</div>
);
};
export default ButtonGroup;
这样,当你单击按钮时,所单击按钮的类名将更改为'active',而其他按钮的类名将保持不变。你可以根据需要自定义'active'类的样式。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云