Question

我在检测用户何时按下回车键时遇到问题。

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

应该在我的控制台日志上显示测试但是没有。

我的代码的这部分工作：

  onChangeText={(text) => {

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

我不确定我应该使用什么方法来捕获回车键。

我的整个代码是：

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

}

})

所有，我真的希望能够知道当用户按下回车键并在那时调用方法。我觉得很奇怪，我找不到这些信息。任何帮助将不胜感激。

Answer 1

安装react-native-dismiss-keyboard然后执行此操作：

_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}
/>

OnSubmitEditing不是触发也不是onEndEditing

1 个答案: