javascript - How to call function on 'Enter' press in TextInput - React Native - Stack Overflow

admin管理员组

文章数量:1312702

I am trying to make Search Bar. I want user to type something in TextInput and when user press 'Enter' I want to call my function.

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

I tried onSubmitEditing but it doesn't work.

I am trying to make Search Bar. I want user to type something in TextInput and when user press 'Enter' I want to call my function.

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

I tried onSubmitEditing but it doesn't work.

• javascript
• node.js
• react-native
• react-native-ios

Share Improve this question Follow asked Apr 14, 2021 at 19:41 ru kuru ku 4122 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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 it works fine, I hope it would be helpful for you

if you are using mutiline={true} in TextInput like <TextInput multiline={true} /> onSubmitEditing will not work, instead it will move to nextLine.

I am doing a workaround, so basically I check if user entered next line, if so, call submit function and dismiss keyboard, you can import {Keyboard} from react-native

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

本文标签： javascriptHow to call function on 39Enter39 press in TextInputReact NativeStack Overflow