web-dev-qa-db-fra.com

Identifier l'action de la touche Retour dans React Native

J'ai un TextInput que j'ai activé multiline comme vrai. La chose est que le clavier ne se cachera pas après avoir appuyé sur Retour. Il va à une nouvelle ligne. J'espérais donc utiliser react-native-disable-keyboard . Pour exploiter cela, je dois identifier l'action de la touche Retour. Comment faire ça?

<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..."
/>
iosreact-native
23
Nimila Hiranya

Ce que j'ai utilisé, c'est onSubmitEditing accessoires. par exemple.

<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"
/>
64
Bruce Lee

D'accord, a trouvé la solution.

<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();
    }
},

La méthode disableKeyboard est issue de react-native-disable-keyboard .

Cela fonctionne parfaitement pour moi.

21
Nimila Hiranya