javascript - 如何在 React Native 中转发其 ref 的组件中使用 Ref

Question

我有一个 React native 自定义输入组件，我已成功将其引用转发给父组件。现在，我还想引用 child 本身的输入，我该怎么做？？

//my imports here

//my text field component
export const MyTextField = React.forwardRef((props, ref) => {

   const [inputValue, setValue] = useState('');

   const clearInput = () => {
      setValue("");
      //I want to get the input by ref here and apply "clear()" method on it
   }


   return (
      <View>
         <TextInput
            /*
             How can i also use this ref to refer to this textinput in The "clearInput" function above
             */
            ref={ref}
            value={inputValue}
            onChangeText={(value) => setValue(value)}
            {...props}
         />
         <IconButton
            icon="close-circle"
            onPress={clearInput}
         />
      </View>
   );
});

Answer 1

Travis Waith-Mair 的这篇文章显示了您想对细节做什么:https://non-traditional.dev/how-to-use-the-forwarded-ref-in-react-1fb108f4e6af

还有一个 npm 包:https://www.npmjs.com/package/@bedrock-layout/use-forwarded-ref

---

这里有一些例子:https://snack.expo.io/@truetiem/use-forwardedref

如果您想将其实现到您的代码中:

// Copy-Pasted the "useForwardedRef" from the linked article by "Travis Waith-Mair"
const useForwardedRef = (ref) =>{
   const innerRef = useRef(null);

   useEffect(() => {
     if (!ref) return;
     if (typeof ref === 'function') {
       ref(innerRef.current);
     } else {
       ref.current = innerRef.current;
     }
   });
 
   return innerRef;
}

export const MyTextField = React.forwardRef((props, ref) => {
   // passing the ref to useForwardedRef hook
   const forwardedRef = useForwardedRef(ref);
   const [inputValue, setValue] = useState('');

   const clearInput = () => {
      setValue("");
      
      // You can access the ref safely with forwardedRef
      forwardedRef.current?.clean();
   }


   return (
      <View>
         <TextInput
            // Passing the forwardedRef here
            ref={forwardedRef}
            value={inputValue}
            onChangeText={(value) => setValue(value)}
            {...props}
         />
         <IconButton
            icon="close-circle"
            onPress={clearInput}
         />
      </View>
   );
});