React父组件点击Next时如何调用子组件的validateAddress验证方法？

要让父组件调用子组件的validateAddress方法，可通过React的useRef钩子结合forwardRef实现，具体步骤如下：

1. 父组件创建并绑定Ref #

在父组件xxxPage中，用useRef创建引用并绑定到Address子组件：

const xxxPage = () => {
  const [allAddressInputsValid, setAllAddressInputsValid] = React.useState(false);
  // 创建用于获取子组件实例的ref
  const addressRef = React.useRef(null);

  const handleNext = () => {
    // 调用子组件的validateAddress方法
    addressRef.current?.validateAddress();
    // 注意：setState是异步操作，直接判断allAddressInputsValid可能拿到旧值，优化方案见下文
    if (allAddressInputsValid) {
      history.push('next-page');
    }
  };

  return (
    <Form id="xxx">
      <FieldGroup
        isFull
        labelStyle="h3-light"
        labelVisual="xxx"
      >
        {/* 将ref绑定到Address组件 */}
        <Address
          ref={addressRef}
          fieldName="xxx"
          labelVisual="xxx"
          setAllAddressInputsValid={setAllAddressInputsValid}
        />
        {/* 其他无关组件 */}
      </FieldGroup>
      <PageNavigation
        onNext={handleNext}
        primaryButtonText="Next"
      />
    </Form>
  );
};

export default xxxPage;

2. 子组件通过forwardRef暴露方法 #

函数组件默认不支持ref，需用React.forwardRef包裹，并通过useImperativeHandle将方法挂载到ref上：

// Address组件修改为forwardRef形式
const Address = React.forwardRef((props, ref) => {
  const { setAllAddressInputsValid } = props;

  const validateAddress = () => {
    const errors = /* 调用错误检查方法 */;

    if (errors.length > 0) {
      setAllAddressInputsValid(false);
      /* 错误处理逻辑 */
    } else {
      setAllAddressInputsValid(true);
    }
    // 直接返回验证结果，避免依赖异步状态
    return errors.length === 0;
  };

  // 将validateAddress方法暴露给父组件的ref
  React.useImperativeHandle(ref, () => ({
    validateAddress
  }));

  return (
    {/* 组件原有内容 */}
  );
});

export default Address;

3. 优化异步状态判断问题 #

由于setState是异步操作，调用validateAddress后立即判断allAddressInputsValid可能拿到旧值。改用子组件返回的验证结果来决定跳转：

// 父组件handleNext修改
const handleNext = () => {
  const isValid = addressRef.current?.validateAddress();
  if (isValid) {
    history.push('next-page');
  }
};

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