React Native（Android）中TextInput的onKeyPress事件失效问题

我帮你梳理下问题所在，以及几个可行的解决方案：

首先，你的代码里有个关键错误导致searchProducts函数执行失败 #

看你定义的searchProducts函数：

searchProducts = () => { if (e.nativeEvent.key == "Enter"){ this.props.searchFunc(this.state.term); } }

这里没有接收事件参数e，执行时e会直接变成undefined，导致函数报错中断，自然不会调用searchFunc。这是最核心的问题，先把这个补上：

searchProducts = (e) => { 
  const key = e.nativeEvent.key;
  // Android上的完成/回车/搜索键可能对应不同的key值，需要多做判断
  if (key === "Enter" || key === "Done" || key === "Search") {
    this.props.searchFunc(this.state.term);
  }
}

更推荐用onSubmitEditing替代onKeyPress检测提交操作 #

在React Native中，onSubmitEditing是专门为输入完成（比如点击键盘的回车/完成/搜索键）设计的事件，比onKeyPress更适配移动端场景，尤其是Android模拟器/设备上的键盘行为：

你可以直接把onKeyPress替换成onSubmitEditing，不需要判断key值，代码更简洁：

// 定义简化的提交函数
handleSubmit = () => {
  this.props.searchFunc(this.state.term);
}

// 在TextInput中使用
<TextInput 
  ref='searchBar' 
  style={styles.searchInput} 
  placeholder={placeholder} 
  onChangeText={this.searchSuggestions} 
  onSubmitEditing={this.handleSubmit} // 替换成这个事件
  underlineColorAndroid="transparent"
  returnKeyType="search" // 可以指定键盘右下角的按键类型，比如"search"、"done"
/>

returnKeyType属性可以让Android键盘显示对应的按键文字（比如"搜索"），提升用户体验。

额外检查：避免父组件的触摸事件干扰 #

你的代码里用TouchableHighlight包裹了整个searchBar，这可能会导致TextInput的部分事件被拦截。如果上面的方案还是有问题，可以尝试移除外层的TouchableHighlight，或者缩小它的作用范围（比如只包裹搜索图标区域）。

修改后的完整代码示例 #

searchProducts = (e) => { 
  const key = e.nativeEvent.key;
  if (key === "Enter" || key === "Done" || key === "Search") {
    this.props.searchFunc(this.state.term);
  }
}

searchSuggestions = searchTerm => { 
  if (this.timeoutId) clearTimeout(this.timeoutId); 
  this.timeoutId = setTimeout(() => this.props.autofillFunc(searchTerm), 500); 
  this.setState({ term: searchTerm }); 
}

componentDidMount() { 
  if (this.props.autoFocus) { 
    this.refs.searchBar.focus(); 
  } 
}

render() { 
  const {placeholder} = this.props; 
  const autoFocus = this.props.autoFocus; 
  return ( 
    <View style={styles.searchBar}> 
      {/* 移除可能干扰的外层TouchableHighlight，或者调整它的作用范围 */}
      <View style={styles.searchBar}> 
        <MBIcon name='ico-24-search' style={styles.searchIcon} /> 
        <TextInput 
          ref='searchBar' 
          style={styles.searchInput} 
          placeholder={placeholder} 
          onChangeText={this.searchSuggestions} 
          // 方案1：修复后的onKeyPress
          onKeyPress={this.searchProducts} 
          // 方案2：更推荐的onSubmitEditing，二选一即可
          // onSubmitEditing={this.handleSubmit}
          underlineColorAndroid="transparent"
          returnKeyType="search"
        /> 
      </View> 
    </View> 
  ); 
}

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