在React中向所点击的按钮添加类,以及向先前所点击的按钮移除类,可以通过以下步骤实现:
import React, { useState } from 'react';
function MyComponent() {
const [activeButton, setActiveButton] = useState(null);
// 其他组件代码...
return (
<div>
<button
className={activeButton === 'button1' ? 'active' : ''}
onClick={() => setActiveButton('button1')}
>
Button 1
</button>
<button
className={activeButton === 'button2' ? 'active' : ''}
onClick={() => setActiveButton('button2')}
>
Button 2
</button>
</div>
);
}
这样,当用户点击按钮时,被点击的按钮将添加'active'类,而先前被点击的按钮将移除'active'类。
请注意,上述代码中的'active'类只是一个示例,您可以根据需要自定义类名。此外,您还可以使用CSS样式来定义'active'类的外观。
这是一个简单的示例,演示了如何在React中向所点击的按钮添加类,并向先前所点击的按钮移除类。根据实际需求,您可以进一步扩展和优化代码。
领取专属 10元无门槛券
手把手带您无忧上云