如何在ComponentDidMount时让TextInput获取焦点？代码无效求助

嘿，我来帮你搞定这个自动聚焦的问题！你之前的代码没生效，主要是因为字符串类型的ref已经是React过时的写法，在React Native中这种方式有时候不能可靠地获取到TextInput的实例，导致调用focus()时找不到对应的组件。

这里给你两种靠谱的解决方案：

方案一：使用官方推荐的createRef（类组件首选） #

这种方式能稳定获取到组件实例，避免this.refs的不可靠性：

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

class YourSearchComponent extends Component {
  constructor(props) {
    super(props);
    // 1. 创建一个ref实例
    this.editRef = createRef();
    this.state = { busca: '' };
  }

  componentDidMount() {
    // 2. 在组件挂载完成后，调用focus方法
    // 用可选链操作符（?.）避免组件还未完全挂载时current为null的情况
    this.editRef.current?.focus();
  }

  render() {
    return (
      <TextInput
        // 3. 把ref绑定到TextInput上
        ref={this.editRef}
        style={{height:60, borderColor:'gray', borderWidth:1, backgroundColor:'white', borderRadius:10}}
        onChangeText={(text) => this.setState({busca: text})}
        onSubmitEditing={(event) => this.props.navigation.navigate('Resultado', {busca: this.state.busca})}
      />
    );
  }
}

方案二：直接用autoFocus属性（最简单） #

React Native的TextInput自带autoFocus属性，直接设置为true就能让组件在加载时自动获取焦点，不用手动写生命周期代码：

<TextInput
  autoFocus={true}
  style={{height:60, borderColor:'gray', borderWidth:1, backgroundColor:'white', borderRadius:10}}
  onChangeText={(text) => this.setState({busca: text})}
  onSubmitEditing={(event) => this.props.navigation.navigate('Resultado', {busca: this.state.busca})}
/>

为什么你的原代码不生效？ #

字符串ref（ref='edit'）是React早期的写法，现在已经不推荐使用了。在组件挂载完成的瞬间，this.refs.edit可能还没被正确赋值为TextInput的实例，这时候调用focus()自然不会有任何反应。而createRef或者autoFocus都是React Native官方支持的可靠方式，能避免这个问题。

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