React Native中TextInput的setState报错与自动导航逻辑问题咨询

咱们先拆解你遇到的两个核心问题：setState报错，以及输入内容长度≥13时自动导航的逻辑实现。

1. setState报错的原因与修复 #

你在onChangeText里使用了普通函数，这会导致函数内部的this指向不是组件实例，因此调用this.setState时会触发错误。解决这个问题最简单的方式是改用箭头函数，箭头函数会继承外部作用域的this指向：

onChangeText={(text) => {
  // 这里的this正确指向组件实例
  this.setState({ busca: text });
  // 后续逻辑...
}}

2. 拼写错误导致长度判断失效 #

你代码里写的this.state.busca.lenght是拼写错误，正确的属性名是length——这个小错误会让你的长度判断永远不成立，一定要修正。

3. 实现输入≥13位时自动导航 #

你之前尝试在onChangeText里重新定义onSubmitEditing的思路不对，正确的做法是：利用setState的回调函数（因为setState是异步操作），在state更新完成后判断文本长度，满足条件时直接调用导航方法。

完整修复后的代码 #

<TextInput 
  ref='edit' 
  style={{
    height:60, 
    borderColor:'gray', 
    borderWidth:1, 
    backgroundColor:'white', 
    borderRadius:10, 
    margin:30
  }} 
  onChangeText={(text) => {
    this.setState({ busca: text }, () => {
      // setState回调确保state已完成更新
      if (this.state.busca.length >= 13) {
        this.props.navigation.navigate('Resultado', { busca: this.state.busca });
      }
    });
  }} 
  onSubmitEditing={() => this.props.navigation.navigate('Resultado', { busca: this.state.busca })} 
  autoFocus 
/>

额外优化建议 #

• 如果你使用的是类组件，建议把文本处理逻辑提取成类方法，用箭头函数绑定this，让代码更易维护：

class YourComponent extends React.Component {
  handleTextChange = (text) => {
    this.setState({ busca: text }, () => {
      if (this.state.busca.length >= 13) {
        this.props.navigation.navigate('Resultado', { busca: this.state.busca });
      }
    });
  }

  render() {
    return (
      <TextInput 
        ref='edit' 
        style={/* 你的样式 */}
        onChangeText={this.handleTextChange}
        onSubmitEditing={() => this.props.navigation.navigate('Resultado', { busca: this.state.busca })} 
        autoFocus 
      />
    )
  }
}

• 可以添加防抖逻辑，避免用户每输入一个字符就触发一次判断，提升性能（比如用lodash.debounce）：

import debounce from 'lodash.debounce';

class YourComponent extends React.Component {
  handleTextChange = debounce((text) => {
    this.setState({ busca: text }, () => {
      if (this.state.busca.length >= 13) {
        this.props.navigation.navigate('Resultado', { busca: this.state.busca });
      }
    });
  }, 300); // 300ms防抖延迟，可按需调整
}

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