当用户按下Enter键时,如何在TextInput上触发功能?

时间:2020-06-24 02:06:52

标签: react-native

我正在为一家公司开发应用程序。我希望TextInput在用户添加文本并在TextInput上按Enter后触发一个功能

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

您可以处理onKeyPress来做到这一点。

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

export default function UselessTextInput() {
  const handleOnKeyPress = event =>{
    const key = event.nativeEvent.key
    // As I remember key for enter button is "Enter", but if not you can console.log(key) and hit enter to check the value
    if(key ==="Enter"){
      //do you stuff here
    }
  }
  return (
    <TextInput
      onKeyPress={handleOnKeyPress}
    />
  );
}

答案 1 :(得分:0)

您可以使用onSubmitEditing在输入或通过键盘提交按钮后执行功能。

https://reactnative.dev/docs/textinput#onsubmitediting

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

export default function UselessTextInput() {
  const executeOnEnter=()=>{ 
    alert('hi i am pressed')
   }
  return (
    <TextInput
      onSubmitEditing={executeOnEnter}
    />
  );
}
相关问题