React - useImperativeHandle 暴露的属性重叠

Question

我正在创建一个组件“UsernameInput”，它呈现我的自定义“TextInput”组件：

const UsernameInput = forwardRef(
  (
    {
      ...
    },
    ref
  ) => {
     ...
     
     return <TextInput ref={ref} />
  });

我的 TextInput 组件向其父组件公开了一些功能：

const TextInput = forwardRef(
  (
    {
      ...
    },
    ref
  ) => {
      ...

      useImperativeHandle(
        ref,
        () => ({
          getText: () => text,
          setText,
          focus,
          blur,
      }),
      [text]
    );

    ...
  });

现在......在我的 UsernameInput 组件中，我也想公开其他功能......

const UsernameInput = forwardRef(
  (
    {
      ...
    },
    ref
  ) => {
     ...

     useImperativeHandle(
       ref,
       () => ({
         getUsernameInformation: () => usernameInformation,
       }),
       [usernameInformation]
     );

     return <TextInput ref={ref} />
  });

我遇到的主要问题是，如果我执行以下操作：

const usernameInputRef = useRef(null);

const handleOnSubmit = () => {
    usernameInputRef.current.blur()
}

return (
   <UsernameInput ref={usernameInputRef} ...
);

代码向我抛出异常“.blur() 未定义”。

似乎因为有两个useImperativeHandle ，所以暴露的功能是重叠的。

关于如何解决这个问题的任何想法？

Answer 1

基于@Amila Senadheera 评论：

   const textInputRef = useRef(null);
    
   ...

   useImperativeHandle(
      ref,
      () => ({
        getUsernameInformation: () => usernameInformation,
        ...textInputRef.current,
      }),
      [usernameInformation]
    );

    ...

    return <TextInput ref={textInputRef} ... />