react-native - 检测多行 TextInput 中的发送/提交按钮

Question

React Native TextInput组件不支持 onSubmitEditing事件，如果它指定为多行输入。

有没有办法检测用户在输入一些文本后何时按下回车/提交/发送(取决于指定的键盘布局)按钮？

Answer 1

我意识到这是一个旧帖子，但我从谷歌偶然发现这里并想分享我的解决方案。由于在提交的情况下需要发生一些事情，而不是简单地模糊，我无法使用 onBlur解释提交。

我使用了 onKeyPress监听器跟踪 Enter键，然后继续提交。 ( 注意 ，目前仅在 iOS 中支持 until this PR 已合并。)

// handler
onKeyPress = ({ nativeEvent }) => {
  if (nativeEvent.key === 'Enter') {
    // submit code
  }
};

// component
<TextInput
  autoFocus={true}
  blurOnSubmit={true}
  enablesReturnKeyAutomatically={true}
  multiline={true}
  onChangeText={this.onChangeText}
  onKeyPress={this.onKeyPress}
  returnKeyType='done'
  value={this.props.name}
/>

请注意，blurOnSubmit仍然需要防止返回键传递给您的 onChangeText处理程序。