如何获取React Next.js中Toggle组件的状态值？

你的Toggle组件当前把状态toggleOn放在内部，外部组件无法直接访问。下面提供两种可行的解决方案，优先推荐第一种符合React数据流的方式：

方案一：状态提升（推荐） #

将Toggle的状态管理移到父组件，通过props把状态和回调传递给Toggle组件，这样父组件就能直接拿到状态值。

修改后的Toggle组件 #

function Toggle({ isOn, onToggle }) {
  return (
    <div>
      {isOn ? (
        <Settingson 
          className={classes.settingson} 
          onClick={onToggle} 
          value="true" 
          name="toggle"
        />
      ) : (
        <Settingsoff 
          className={classes.settingsoff} 
          onClick={onToggle} 
          value="false" 
          name="toggle"
        />
      )}
    </div>
  );
}

export default Toggle;

父组件使用示例 #

import Toggle from './Toggle';
import { useState } from 'react';

function ParentComponent() {
  // 父组件维护Toggle的状态
  const [toggleState, setToggleState] = useState(false);

  const handleToggle = () => {
    setToggleState(prev => !prev);
    // 这里可以直接处理状态变化后的逻辑
  };

  return (
    <div>
      <Toggle isOn={toggleState} onToggle={handleToggle} />
      {/* 直接使用toggleState变量获取当前状态 */}
      <p>Toggle当前状态：{toggleState ? '开启' : '关闭'}</p>
    </div>
  );
}

方案二：使用Ref暴露状态（不推荐，仅作备选） #

如果不想把状态移到父组件，可以通过forwardRef和useImperativeHandle让Toggle组件暴露获取状态的方法，但这种方式会打破React单向数据流，不利于组件维护。

修改后的Toggle组件 #

import { useState, forwardRef, useImperativeHandle } from 'react';

const Toggle = forwardRef((props, ref) => {
  const [toggleOn, setToggleOn] = useState(false);

  // 向父组件暴露获取状态的方法
  useImperativeHandle(ref, () => ({
    getToggleState: () => toggleOn,
    // 也可以暴露切换方法
    toggle: () => setToggleOn(prev => !prev)
  }));

  return (
    <div>
      {toggleOn ? (
        <Settingson 
          className={classes.settingson} 
          onClick={() => setToggleOn(prev => !prev)} 
          value="true" 
          name="toggle"
        />
      ) : (
        <Settingsoff 
          className={classes.settingsoff} 
          onClick={() => setToggleOn(prev => !prev)} 
          value="false" 
          name="toggle"
        />
      )}
    </div>
  );
});

export default Toggle;

父组件使用示例 #

import Toggle from './Toggle';
import { useRef } from 'react';

function ParentComponent() {
  const toggleRef = useRef(null);

  const checkToggleState = () => {
    // 通过ref调用组件暴露的方法获取状态
    const currentState = toggleRef.current.getToggleState();
    console.log('Toggle当前状态：', currentState);
  };

  return (
    <div>
      <Toggle ref={toggleRef} />
      <button onClick={checkToggleState}>查看Toggle状态</button>
    </div>
  );
}

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