2016-03-03 10 views
5

Ho un TextInput che ho abilitato multiline come true. La cosa è che la tastiera non si nasconde dopo aver premuto Return. Va a una nuova linea. Quindi speravo di usare react-native-dismiss-keyboard. Per sfruttarlo ho bisogno di identificare l'azione del tasto Invio. Come fare questo?Identifica azione chiave di risposta in React Native

<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..." 
/> 

risposta

13

Ok, ho trovato la soluzione.

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

Il metodo dismissKeyboard è da react-native-dismiss-keyboard.

Questo funziona perfettamente per me.

+0

Se si cattura il riferimento, è anche possibile eseguire una sfocatura su di esso: 'this._textInput.blur(); // respingere la tastiera ' – kevando

+9

onKeyPress è solo iOS, e Android? –

+1

È utile grazie! –

14

Quello che ho usato è onSubmitEditing oggetti di scena. per esempio.

<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" 
/> 
+0

Questa dovrebbe essere la risposta accettata. – iStar