React Native TextInput显示后无法获取焦点问题求助

嘿，我来帮你捋清楚问题出在哪以及怎么解决～

首先，你遇到的核心问题是：setState是异步更新状态的，你在调用this.setState({isEditing: true})之后立刻执行this.textInput.focus()，这时候组件还没完成重新渲染，TextInput根本还没被创建出来，this.textInput还是undefined，自然没法调用focus方法。

另外你的代码还有两个小细节需要修正：

• render里的isEditing要改成this.state.isEditing，不然会找不到变量；
• else分支里返回了两个相邻的JSX元素（<Text>和<TouchableOpacity>），React不允许相邻兄弟元素，得用<View>或者<>（Fragment）把它们包起来。

下面给你两种可行的解决方案：

方案1：用setState的回调函数 #

setState的第二个参数是状态更新完成、组件重新渲染后的回调函数，在这个回调里调用focus就没问题了：

class YourComponent extends React.Component {
  state = { isEditing: false };

  onEdit = () => {
    // 用箭头函数绑定this，不用每次在render里bind
    this.setState({ isEditing: true }, () => {
      // 状态更新完成，TextInput已经渲染，放心调用focus
      this.textInput?.focus();
      // 加?.是防止意外情况导致textInput为undefined时报错，更安全
    });
  };

  render() {
    const { isEditing } = this.state;
    return (
      <View>
        {isEditing ? (
          <TextInput
            ref={(input) => (this.textInput = input)}
            value="Hello, World!"
          />
        ) : (
          <View>
            <Text>Hello, World!</Text>
            <TouchableOpacity onPress={this.onEdit}>
              <Text>Edit</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    );
  }
}

方案2：用componentDidUpdate生命周期钩子 #

如果你的业务逻辑更复杂，也可以在组件更新后检查状态变化，再执行焦点获取：

class YourComponent extends React.Component {
  state = { isEditing: false };

  onEdit = () => {
    this.setState({ isEditing: true });
  };

  componentDidUpdate(prevProps, prevState) {
    // 只有当isEditing从false变为true时，才执行focus
    if (!prevState.isEditing && this.state.isEditing) {
      this.textInput?.focus();
    }
  }

  render() {
    const { isEditing } = this.state;
    return (
      <View>
        {isEditing ? (
          <TextInput
            ref={(input) => (this.textInput = input)}
            value="Hello, World!"
          />
        ) : (
          <View>
            <Text>Hello, World!</Text>
            <TouchableOpacity onPress={this.onEdit}>
              <Text>Edit</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    );
  }
}

这两种方案都能解决你的问题，选哪种看你的代码习惯就行～

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