在React中将选定状态添加到单个按钮,可以通过以下步骤实现:
useState
钩子函数来创建一个状态变量,并将其初始值设置为false
,表示未选定状态。import React, { useState } from 'react';
function Button() {
const [isSelected, setIsSelected] = useState(false);
// 其他组件代码...
return (
<button onClick={() => setIsSelected(!isSelected)}>
{isSelected ? '已选定' : '未选定'}
</button>
);
}
export default Button;
onClick
事件处理程序中,使用setIsSelected
函数来切换选定状态。当按钮被点击时,isSelected
的值将被取反,从而实现选定状态的切换。isSelected
为true
,则显示"已选定",否则显示"未选定"。这样,当用户点击按钮时,选定状态将会在"已选定"和"未选定"之间切换。
关于React的更多信息和学习资源,可以参考腾讯云的React产品介绍页面:React - 腾讯云
领取专属 10元无门槛券
手把手带您无忧上云