识别 React Native 中的 Return 键操作

Question

我有一个

TextInput

，我已将

multiline

启用为 true。问题是按下回车键后键盘不会隐藏。它进入一个新的行。所以我希望使用react-native-dismiss-keyboard。为了利用这一点，我需要识别 Return 键操作。如何做到这一点？

<TextInput
    style={styles.additionalTextInput}
    multiline={true}
    autoCapitalize="sentences"
    autoCorrect={true}
    onChangeText={(text) => this.setState({text})}
    keyboardType="default"
    returnKeyType="done"
    onKeyPress={(keyPress) => console.log(keyPress)}
    placeholder="Enter text here..."
/>

Answer 1

我用的是

onSubmitEditing

道具。例如

<TextInput style={[styles.textInput]}
  placeholder='搜索'
  placeholderTextColor='#bbb'
  onChange={(event) => {
    this.searchChange(event.nativeEvent.text)
  }}
  returnKeyType='search'
  autoFocus={true}
  value={ this.props.searchName }
  selectionColor={colors.orangeColor}
  onSubmitEditing={this.searchSubmit}
  clearButtonMode="while-editing"
/>

Answer 2

好的，找到解决方案了。

<TextInput
    style={styles.additionalTextInput}
    multiline={true}
    autoCapitalize="sentences"
    autoCorrect={true}
    onChangeText={(orderInstructions) => this.setState({orderInstructions})}
    keyboardType="default"
    returnKeyType="done"
    onKeyPress={this.handleKeyDown}
    placeholder="Enter text here..."
/>

handleKeyDown: function(e) {
    if(e.nativeEvent.key == "Enter"){
        dismissKeyboard();
    }
},

dismissKeyboard 方法来自 react-native-dismiss-keyboard。

这对我来说非常有效。

Answer 3

如果您与

multiline={true}

一起使用，

return

键还会在调用

onSubmitEditing

之前在文本中添加换行符。此外，键盘不会自动关闭，让您

import { Keyboard } from 'react-native'

并在 onSubmitEditing 中调用

Keyboard.dismiss()

。

更简单的解决方案是使用

blurOnSubmit={true}

自动关闭键盘并防止

return

键注册为

newline

。

Answer 4

  const onKeyPress = (e) => {
console.log("onKeyPress",e?.nativeEvent)
    if (e?.nativeEvent?.key === 'Enter') {
      Keyboard.dismiss();
    }
  };

        <TextInput
          placeholder={placeholder}
          value={value}
          onChangeText={onChangeText}
          onKeyPress={onKeyPress}
        />