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

Question

如果指定为多行输入,则React Native TextInput组件不支持该onSubmitEditing事件.

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

Answer 1

我意识到这是一篇很老的帖子,但我在谷歌这里偶然发现并希望分享我的解决方案.由于在提交的情况下需要发生一些事情,而不仅仅是模糊,我无法onBlur用来解释提交.

我利用一个onKeyPress监听器来跟踪Enter密钥,然后继续提交.(注意,目前仅在iOS中支持此功能,直到此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处理程序.

Answer 2

在 iOS 上，这应该根据文档工作。

使用 onBlur 函数：

当文本输入模糊时调用的回调

与ios仅blurOnSubmit结合使用：

如果为 true，则提交时文本字段将变得模糊。对于单行字段，默认值为 true；对于多行字段，默认值为 false。请注意，对于多行字段，将blurOnSubmit 设置为true 意味着按回车键将使字段模糊并触发onSubmitEditing 事件，而不是在字段中插入换行符。

我会尝试测试一下。

编辑： 完成测试

BlurOnSubmit 不像在 React-Native 0.14.2 中那样工作。即使设置为 true，返回/完成按钮和回车键也只会创建换行符，不会模糊字段。

我目前无法在较新的版本上进行测试。