如何在React中跨组件修改useState变量ulState的值？

要实现点击指定容器时修改ulState并收起下拉选择器，核心是让包含DivElem的父组件能够控制Form内部Select组件的ulState状态。这里有两种常用的实现方式，你可以根据项目结构选择：

方案一：状态提升（推荐，符合React单向数据流） #

这种方法将ulState的状态从Form组件提升到父组件，通过props传递给Form和Select，让父组件直接控制状态变更，逻辑更清晰易维护。

步骤1：父组件中添加状态并传递给Form #

在包含DivElem的父组件里，声明ulState和对应的状态更新函数，然后在DivElem的onClick事件中调用更新函数，将ulState设为true（对应收起状态）：

import { useState } from 'react';

// 父组件
const ParentComponent = () => {
  const [toBlur, setToBlur] = useState(false); // 你原有的状态
  const [ulState, setUlState] = useState(true); // 初始设为收起状态，可根据需求调整

  return (
    <DivElem onClick={() => setUlState(true)}> {/* 点击容器时触发收起 */}
      <div className="container">
        <Row>
          <Col md={4} className="column">
            <h2 className={`toBlur ${toBlur.toString()}`}> Lorem Ipsum </h2>
            <Form
              toBlur={toBlur}
              setToBlur={setToBlur}
              ulState={ulState} // 传递状态给Form
              setUlState={setUlState} // 传递状态更新函数给Form
            />
          </Col>
        </Row>
      </div>
    </DivElem>
  );
};

步骤2：Form组件接收props并替换内部状态 #

在Form组件中，移除原来内部维护的ulState，改用父组件传递的props.ulState和props.setUlState，同时更新Select里的交互逻辑：

// Form组件内部
const Form = (props) => {
  // 移除原有的const [ulState, setUlState] = useState(...)
  // ...其他原有逻辑

  return (
    // ...其他内容
    <SelectElement>
      <div className={`${props.theme ?? ''}field${!touched && props.mensagemValidacao !== undefined ? 'errorclass' : ''} ${props.disabled === true ? 'disabled' : ''}`}>
        <ul className={`${noClick && 'noArrow'} select ${props.ulState ? 'active' : ''}`}>
          {/* 点击展开/收起时切换状态 */}
          {noClick === false && (
            <li className="active" onClick={() => {
              openSelect(selected);
              props.setUlState(!props.ulState);
            }}>
              {selected}
            </li>
          )}
          {noClick === true && <li className="active"> {selected} </li> }
          {/* 选择选项后自动收起 */}
          {props.opcoes.map((key, index) => (
            <li
              value={props.opcoes[key]}
              key={index}
              onClick={() => {
                selectItem(key);
                props.setUlState(true);
              }}
            >
              {key}
            </li>
          ))}
        </ul>
        <input type="hidden" id={props.id} {...props.register} />
      </div>
    </SelectElement>
    // ...其他内容
  );
};

方案二：使用Ref调用Form内部方法（适合不想提升状态的场景） #

如果ulState只在Form组件内部使用，不想提升到父组件，可以通过forwardRef和useImperativeHandle让父组件调用Form内部的方法来修改状态。

步骤1：父组件创建Ref并传递给Form #

import { useRef } from 'react';

// 父组件
const ParentComponent = () => {
  const [toBlur, setToBlur] = useState(false);
  const formRef = useRef(null); // 创建Ref关联Form组件

  return (
    <DivElem onClick={() => {
      // 调用Form暴露的closeSelect方法
      if (formRef.current) {
        formRef.current.closeSelect();
      }
    }}>
      <div className="container">
        <Row>
          <Col md={4} className="column">
            <h2 className={`toBlur ${toBlur.toString()}`}> Lorem Ipsum </h2>
            <Form
              ref={formRef} // 传递Ref给Form
              toBlur={toBlur}
              setToBlur={setToBlur}
            />
          </Col>
        </Row>
      </div>
    </DivElem>
  );
};

步骤2：Form组件使用forwardRef暴露方法 #

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

// 用forwardRef包裹Form组件，接收父组件传递的Ref
const Form = forwardRef((props, ref) => {
  const [ulState, setUlState] = useState(true); // 内部维护状态

  // 向父组件暴露closeSelect方法
  useImperativeHandle(ref, () => ({
    closeSelect: () => {
      setUlState(true); // 设置为收起状态
    }
  }));

  // ...其他原有逻辑

  return (
    // ...其他内容
    <SelectElement>
      <div className={`${props.theme ?? ''}field${!touched && props.mensagemValidacao !== undefined ? 'errorclass' : ''} ${props.disabled === true ? 'disabled' : ''}`}>
        <ul className={`${noClick && 'noArrow'} select ${ulState ? 'active' : ''}`}>
          {noClick === false && (
            <li className="active" onClick={() => {
              openSelect(selected);
              setUlState(!ulState); // 内部切换状态
            }}>
              {selected}
            </li>
          )}
          {noClick === true && <li className="active"> {selected} </li> }
          {props.opcoes.map((key, index) => (
            <li
              value={props.opcoes[key]}
              key={index}
              onClick={() => {
                selectItem(key);
                setUlState(true); // 选择后收起
              }}
            >
              {key}
            </li>
          ))}
        </ul>
        <input type="hidden" id={props.id} {...props.register} />
      </div>
    </SelectElement>
    // ...其他内容
  );
});

// 设置组件显示名称，方便调试
Form.displayName = 'Form';

export default Form;

注意事项 #

• 确认ulState的逻辑：你提到false对应展开状态，true对应收起状态，所以设置setUlState(true)就是触发收起动作，别搞反了。
• 如果选择方案一，要确保Form组件中所有用到ulState的地方都替换成props.ulState，避免混用内部状态和父组件传递的状态。

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