识别 React 本机中的返回关键操作

我有一个 TextInput，我已经启用 multiline为真。问题是键盘不会隐藏后，返回是按下。这是一条新线路。所以我想用反应-本地-解雇-键盘。要利用这一点，我需要确定返回键操作。怎么做？

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

82528 次浏览

小开

好了，找到解决办法了。

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

DisresKeyboard 的方法来自反应-本地-解雇-键盘。

这对我来说再合适不过了。

小开

最佳答案

我用的是 onSubmitEditing道具。

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

小开

如果您使用的是 multiline={true}，那么在调用 onSubmitEditing之前，return键还会在文本中添加换行符。此外，键盘不会被自动解雇，使您的 import { Keyboard } from 'react-native'和调用的 Keyboard.dismiss()在 onSubmitEditing。

一个更简单的解决方案是使用 blurOnSubmit={true}自动关闭键盘并防止 return键注册为 newline。