如何在 TextInput 中按“Enter”键调用函数 - React Native

Question

我正在尝试制作搜索栏。我希望用户在

TextInput

中输入一些内容，当用户按“Enter”时，我想调用我的函数。

<TextInput
//here when user press enter call function()
style={styles.searchStyle}
allowFontScaling={false}
placeholder="Search" 
onChangeText={(val) => {setSearch(val)}}
/> 

我尝试过

onSubmitEditing

但没用。

Answer 1

import React, { Component } from 'react' 
import {TextInput} from 'react-native'

const Trial = () => {
    const onSubmitted = () => {
        console.log('Submitted')
      }
return(
    <TextInput
//here when user press enter call function()
// style={styles.searchStyle}
allowFontScaling = {false}
placeholder = "Search" 
onSubmitEditing = {() => onSubmitted()}

/>
)
}

export default Trial

onSubmitEditing 效果很好，希望对您有帮助

Answer 2

如果您在 TextInput 中使用 mutiline={true} ，如

<TextInput multiline={true} />

onSubmitEditing 将不起作用，而是会移至下一行。

我正在做一个解决方法，所以基本上我检查用户是否输入了下一行，如果是，则调用提交函数并关闭键盘，您可以从react-native导入{Keyboard}

<TextInput onChangeText={(txt) => {
        if (/\n/.test(txt)) {
         //call submit function here
          Keyboard.dismiss()
          return
        } else {
          //do something here
        }
        
      }} />