React Native调用ref报错：undefined is not a function问题求助

嘿，这个报错我之前踩过坑！大概率是你给TextInput设置ref的方式不对，导致this.textInput压根没拿到输入框的实例，所以调用focus()才会报「undefined is not a function」的错。我给你分两种常见场景拆解解决方案：

一、如果你用的是类组件 #

先看看你是不是踩了这些坑？ #

很多新手会用已经被废弃的字符串ref，或者没处理好this的绑定，比如：

错误示例：

class MyComponent extends React.Component {
  focusInput() {
    this.textInput.focus(); // 这里必然报错
  }
  render() {
    return (
      <>
        <TextInput ref="textInput" />
        <Button onPress={() => this.focusInput()} title="聚焦输入框" />
      </>
    );
  }
}

字符串ref不仅被React官方废弃，还经常出现实例获取失败的问题，再加上focusInput里的this没绑定，双重踩坑。

正确的两种写法 #

方式1：用React.createRef()（官方推荐）

import React from 'react';
import { TextInput, Button } from 'react-native';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref实例
    this.textInput = React.createRef();
  }

  // 用箭头函数定义方法，自动绑定组件实例的this
  focusInput = () => {
    // 通过current属性获取输入框实例
    this.textInput.current.focus();
  };

  render() {
    return (
      <>
        <TextInput ref={this.textInput} />
        <Button onPress={this.focusInput} title="聚焦输入框" />
      </>
    );
  }
}

如果不习惯箭头函数，也可以在constructor里手动绑定：this.focusInput = this.focusInput.bind(this)，效果是一样的。

方式2：用回调ref

这种写法更灵活，适合需要动态控制ref的场景：

class MyComponent extends React.Component {
  focusInput = () => {
    this.textInput.focus();
  };

  render() {
    return (
      <>
        {/* 输入框挂载时，把实例直接赋值给组件的textInput属性 */}
        <TextInput ref={(input) => { this.textInput = input; }} />
        <Button onPress={this.focusInput} title="聚焦输入框" />
      </>
    );
  }
}

二、如果你用的是函数组件 #

函数组件里没有this，得用React的useRef钩子来处理，别再想着用this啦！

错误写法示例（踩坑预警） #

// 错误！函数组件里没有this
function MyComponent() {
  const focusInput = () => {
    this.textInput.focus();
  };
  return (
    <>
      <TextInput ref="textInput" />
      <Button onPress={focusInput} title="聚焦输入框" />
    </>
  );
}

正确写法（用useRef） #

import React, { useRef } from 'react';
import { TextInput, Button } from 'react-native';

function MyComponent() {
  // 创建ref对象，初始值为null
  const textInputRef = useRef(null);

  const focusInput = () => {
    // 用可选链?.避免输入框还没挂载就调用focus的报错
    textInputRef.current?.focus();
  };

  return (
    <>
      <TextInput ref={textInputRef} />
      <Button onPress={focusInput} title="聚焦输入框" />
    </>
  );
}

这里的?.是ES6的可选链操作符，能防止组件还没渲染完成、ref还没拿到实例时调用focus导致的报错，非常实用。

额外排查小技巧 #

• 如果你的TextInput是自定义封装的组件，一定要记得透传ref！不然父组件拿不到底层的TextInput实例：

// 自定义组件要用到forwardRef透传ref
const CustomTextInput = React.forwardRef((props, ref) => {
  return <TextInput ref={ref} {...props} />;
});

父组件里用这个自定义组件时，就可以像用原生TextInput一样调用focus了。

• 检查调用focus()的时机：如果在组件还没挂载完成时就调用（比如类组件的componentWillMount、函数组件的useEffect没加依赖就立刻执行），这时候ref的current还是null，也会报错。可以加个判断或者把调用时机放在组件挂载完成后。

内容的提问来源于stack exchange，提问作者orelzion