OnSubmitEditing wird nicht ausgelöst und ist auch nicht OnEndEditing

Question

Ich habe ein Problem bei der Erkennung, wenn die Eingabetaste von einem Benutzer gedrückt wird.

OnSubmitEditing={() => console.log('test')} 

Sollte Test auf meinem Konsolenprotokoll anzeigen, aber es nicht.

Dieser Teil meines Code funktioniert:

onChangeText={(text) => { 

this.setState({task:text}) 
console.log(this.state.task) 
}} 

Ich bin nicht sicher, welche Methode soll ich die Enter-Taste erfassen werden.

Mein ganzer Code ist:

import React,{Component} from 'react'; 
import{ 
StyleSheet, 
Text, 
TextInput, 
View 
} from 'react-native'; 

module.exports= React.createClass({ 
getInitialState(){ 
return({ 

tasks:['take out the trash','get groceries','Practice piano'], 
task:'' 
}) 

}, 
renderList(tasks){ 
return(
tasks.map((task) =>{ 
return(
<View key={task} style={styles.task}> 
<Text>{task}</Text> 
</View> 

) 

}) 

) 

}, 
addTask(){ 
    console.log('test') 
let tasks = this.state.tasks.concat([this.state.task]); 
this.setState({tasks:tasks}) 

}, 
render(){ 
return(
<View style={styles.container}> 
<Text style={styles.header}>To-Do Master</Text> 
<Text> 
</Text> 
<TextInput style={styles.input} placeholder='Add a task' 
onChangeText={(text) => { 

this.setState({task:text}) 
console.log(this.state.task) 
}} 
onEndEditing={() => this.addTask()} 
/> 
{this.renderList(this.state.tasks)} 
</View> 

) 

} 

}); 

const styles = StyleSheet.create({ 
container:{ 
flex:1, 
}, 
header:{ 
margin:30, 
marginTop:40, 
textAlign:'center', 
fontSize:18 
}, 
task:{ 
height:60, 
borderWidth:1, 
borderColor:'black', 
justifyContent:'center', 
alignItems:'center' 

}, 
input:{ 

height:60, 
borderWidth:1, 
borderRadius:5, 
borderColor:'black', 
textAlign:'center', 
margin:10 

} 

}) 

allem würde ich wirklich wie wäre in der Lage ist zu wissen, wenn der Benutzer die Taste und halten in dieser Zeit ein Verfahren drückt ein. Ich finde es merkwürdig, dass ich diese Information nicht finden kann. Jede Hilfe würde sehr geschätzt werden.

Answer 1

react-native-dismiss-keyboard installieren und dann tun:

_onChangeText = (text) => { 
    this.setState({task:text}) 
    console.log(this.state.task) 
} 

_handleKeyDown = (event) => { 
    if(event.nativeEvent.key == "Enter"){ 
     dismissKeyboard(); 
    } 
} 

<TextInput 
    style={styles.input} 
    placeholder='Add a task' 
    onChangeText={this._onChangeText} 
    keyboardType="default" 
    returnKeyType="done" 
    onKeyPress={this._handleKeyDown} 
/>