react 获取子组件的值 useRef ts

当使用 useRef 创建一个 ref 时，可以通过 ref.current 属性获取子组件的值。在 React 中，可以使用 forwardRef 来获取子组件的 ref。以下是一个示例代码：

import React, { useRef } from 'react';

const ChildComponent = React.forwardRef((props, ref) => {
  const inputRef = useRef(null);

  React.useImperativeHandle(ref, () => ({
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return (
    <input type="text" ref={inputRef} />
  );
});

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    console.log(childRef.current.getValue());
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
};

在上面的代码中，ChildComponent 使用 forwardRef 来获取父组件传递的 ref，并将 inputRef 赋值给 ref。然后，使用 useImperativeHandle 来暴露一个名为 getValue 的方法，该方法返回 inputRef.current.value。在 ParentComponent 中，使用 useRef 创建一个 childRef，并将其传递给 ChildComponent。然后，当用户点击按钮时，调用 childRef.current.getValue() 来获取子组件的值。