React 自定义开关按钮如何检测选中选项并同步更新到state

• 第一步：声明选中状态
  在组件内使用useState初始化选中值，默认值可根据需求设置为OR或AND：

import { useState } from 'react';

function ToggleButton() {
  // 初始化选中状态，默认选OR
  const [selectedOption, setSelectedOption] = useState('OR');
}

• 第二步：绑定切换逻辑
  两种绑定方式可选，按需使用：
  1. 点击整个开关容器切换：给开关外层容器绑定点击事件，每次点击翻转状态值

  const handleToggle = () => {
    setSelectedOption(prev => prev === 'OR' ? 'AND' : 'OR');
  };
  

  对应JSX结构：

  <div className="your-toggle-class" onClick={handleToggle}>
    <span className={selectedOption === 'OR' ? 'active' : ''}>OR</span>
    <span className={selectedOption === 'AND' ? 'active' : ''}>AND</span>
    {/* 原有滑块结构，可根据selectedOption控制位置样式 */}
    <div className={`slider ${selectedOption === 'AND' ? 'slider-right' : ''}`}></div>
  </div>
  

  2. 点击对应文字直接选中：给两个文字选项单独绑定点击事件，点击直接设置对应值

  <div className="your-toggle-class">
    <span onClick={() => setSelectedOption('OR')} className={selectedOption === 'OR' ? 'active' : ''}>OR</span>
    <span onClick={() => setSelectedOption('AND')} className={selectedOption === 'AND' ? 'active' : ''}>AND</span>
    <div className={`slider ${selectedOption === 'AND' ? 'slider-right' : ''}`}></div>
  </div>
  

• 第三步：使用状态
  后续需要获取当前选中值时，直接读取selectedOption变量即可，状态会实时同步最新选中的选项。

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