React/React Aria中合并状态实现文本与类名切换的问题

你不需要同时维护自定义的toggle状态和React Aria的state.isSelected，这是导致文本重复、状态不同步的核心原因。React Aria的useToggle钩子已经封装了完整的选中状态与切换逻辑，直接依赖它提供的状态就能实现鼠标/键盘操作的同步响应。

正确实现代码示例 #

import { useToggle } from 'react-aria';
import styles from './YourComponent.module.css'; // 替换为你的样式文件路径

function ToggleComponent() {
  // 直接使用React Aria的useToggle获取状态与操作属性
  const { state, toggleProps } = useToggle({
    defaultSelected: false // 可选：设置初始选中状态，默认false
  });

  return (
    <button 
      {...toggleProps}
      className={state.isSelected ? styles.ToggleActiveOff : styles.ToggleActiveOn}
    >
      {/* 基于统一状态控制文本显示 */}
      {state.isSelected ? 'Off' : 'On'}
    </button>
  );
}

关键说明 #

1. 移除自定义状态：删掉你自己声明的const [toggle, setToggle] = useState(false)和toggler函数，toggleProps已经包含了点击、空格/回车触发切换的逻辑，绑定到元素上即可自动响应所有合法操作。
2. 统一状态判断：文本和类名都只依赖state.isSelected：
   • 文本：选中时显示Off，未选中显示On，完全匹配你的需求
   • 类名：选中时应用ToggleActiveOff样式，未选中应用ToggleActiveOn样式
3. 避免状态冲突：自定义toggle和React Aria的state.isSelected没有联动逻辑，很容易出现状态不一致的情况，完全依赖React Aria提供的状态就能保证操作同步。

手动触发切换的场景 #

如果需要在组件外部手动触发切换（比如其他按钮操作），可以直接调用useToggle返回的toggle方法：

const { state, toggleProps, toggle } = useToggle();

// 外部手动触发切换
const handleManualToggle = () => {
  toggle();
};

内容的提问来源于stack exchange，提问作者mike