For example, in react-native, I can pass a ref to a regular TextInput and then, through this ref, call the methods:

const inputRef = useRef(null);

const myCallback = () => {
  inputRef?.current?.focus();
}

<>
  <TouchableOpacity onPress={() => myCallback()}>
    <Text>
      Press here to focus the input!
    </Text>
  </TouchableOpacity>

  <TextInput 
    ref={inputRef}
    {...props} // Doesn't matter, nothing special
  >
</>

So, my question is, how can I create methods on my components, so I can call them from outside of component using ref.

Of course, I'm interested in creating a method in a functional component.

CodePudding user response：

You can use useImperativeHandle hook to expose the methods you need to have with the input element.

Try like this.

import React, { useImperativeHandle, forwardRef, useRef } from "react";
import { Button, StyleSheet, View, TextInput } from "react-native";

const MyTextInput = (props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    doFocus: () => {
      inputRef.current.focus();
    },
    doBlur: () => {
      inputRef.current.blur();
    }
  }));
  return <TextInput ref={inputRef} style={props.style} />;
};
const MyCustomTextInput = forwardRef(MyTextInput);

const App = () => {
  const myInputRef = useRef();

  return (
    <View style={styles.app}>
      <MyCustomTextInput ref={myInputRef} style={styles.input} />
      <View style={styles.button}>
        <Button
          onPress={() => {
            myInputRef?.current?.doFocus();
          }}
          title="focus"
          style={styles.button}
        />
      </View>
      <View style={styles.button}>
        <Button
          onPress={() => {
            myInputRef?.current?.doBlur();
          }}
          title="blur"
          style={styles.button}
        />
      </View>
    </View>
  );
};

Code sandbox => https://codesandbox.io/s/react-native-web-forked-mnwee?file=/src/App.js