Реагируйте - свойства, доступные для использования, перекрываются

#javascript #reactjs #react-native #react-hooks

Вопрос:

Я создаю компонент «UsernameInput», который отображает мой пользовательский компонент «TextInput» :

 const UsernameInput = forwardRef(  (  {  ...  },  ref  ) =gt; {  ...    return lt;TextInput ref={ref} /gt;  });

Мой компонент TextInput предоставляет некоторые функции своим родителям:

 const TextInput = forwardRef(  (  {  ...  },  ref  ) =gt; {  ...   useImperativeHandle(  ref,  () =gt; ({  getText: () =gt; text,  setText,  focus,  blur,  }),  [text]  );   ...  });

Теперь… в моем компоненте UsernameInput я хочу предоставить и другие функции…

 const UsernameInput = forwardRef(  (  {  ...  },  ref  ) =gt; {  ...   useImperativeHandle(  ref,  () =gt; ({  getUsernameInformation: () =gt; usernameInformation,  }),  [usernameInformation]  );   return lt;TextInput ref={ref} /gt;  });

Основная проблема, с которой я сталкиваюсь, заключается в том, что, если я сделаю следующее:

 const usernameInputRef = useRef(null);  const handleOnSubmit = () =gt; {  usernameInputRef.current.blur() }  return (  lt;UsernameInput ref={usernameInputRef} ... );

Код выдает мне исключение «.blur() не определен».

Похоже, что из-за наличия двух useImperativeHandle доступных функций они перекрываются.

Есть какие-нибудь идеи о том, как решить эту проблему?

1. Вам нужно создать новый ref вход UsernameInput и использовать его для выполнения манипуляций TextInput внутри UsernameInput , не передавая то же ref самое .

2. хорошо, это работает!!

Ответ №1:

На основе комментария @Amila Senadheera:

 const textInputRef = useRef(null);    ...   useImperativeHandle(  ref,  () =gt; ({  getUsernameInformation: () =gt; usernameInformation,  ...textInputRef.current,  }),  [usernameInformation]  );   ...   return lt;TextInput ref={textInputRef} ... /gt;