Question

我有TextInput我已启用multiline为真。事情是按下Return键后键盘不会隐藏。它走向了一条新的路线。所以我希望使用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道具。 e.g。

<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。

识别React Native中的Return Key操作

3 个答案: