React Native中Enter键为何无法触发onKeyPress事件？

我来帮你搞定这个问题！你遇到的核心问题是：onKeyPress并不适合捕获手机键盘上的Done/Go这类提交按钮事件，而且不同平台对这类按键的事件触发逻辑有差异，反而React Native提供了专门的onSubmitEditing事件来处理这个场景——这其实就是你一开始想找的“onSubmit类型”监听器~

问题原因 #

• 在iOS上，键盘的Done/Go按钮触发的是onSubmitEditing事件，而非onKeyPress；
• Android部分键盘的Enter键也不会通过onKeyPress传递"Enter"这个key值，而是直接触发提交事件；
• 只有字符类按键（比如j/x）会稳定触发onKeyPress，所以你之前的代码只对这类按键有反应。

解决方案 #

直接替换onKeyPress为onSubmitEditing，这是跨平台处理键盘提交按钮的标准方案，同时可以通过returnKeyType属性设置键盘显示的按钮文字（比如search/done/go），提升用户体验：

searchProducts = () => {
  // 不需要再判断key，因为onSubmitEditing本身就是提交触发的
  this.props.searchFunc(this.state.term);
}

<TextInput 
  ref='searchBar' 
  style={styles.searchInput} 
  placeholder={placeholder} 
  onChangeText={this.searchSuggestions} 
  onSubmitEditing={this.searchProducts}  // 替换为onSubmitEditing
  underlineColorAndroid="transparent"
  returnKeyType="search"  // 可选：设置键盘按钮为"搜索"，根据需求可选done/go等
/>

额外补充：如果需要兼容物理键盘Enter键 #

如果你还想处理物理键盘的Enter键（比如平板外接键盘的情况），可以同时保留onKeyPress并调整判断逻辑，结合onSubmitEditing使用：

searchProducts = () => {
  this.props.searchFunc(this.state.term);
}

handleKeyPress = (e) => {
  // 兼容物理键盘的Enter键，注意iOS上Enter对应的是'\n'
  if (e.nativeEvent.key === 'Enter' || e.nativeEvent.key === '\n') {
    this.searchProducts();
  }
}

<TextInput 
  ref='searchBar' 
  style={styles.searchInput} 
  placeholder={placeholder} 
  onChangeText={this.searchSuggestions} 
  onSubmitEditing={this.searchProducts}
  onKeyPress={this.handleKeyPress}  // 增加物理键盘支持
  underlineColorAndroid="transparent"
  returnKeyType="search"
/>

这样不管是手机键盘的Done/Go按钮，还是物理键盘的Enter键，都能正确触发搜索逻辑啦~

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