首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当React Native(安卓)中的onSubmitEditing {true}时,TextInput上的Multiline=不起作用

当React Native(安卓)中的onSubmitEditing设置为{true}时,TextInput上的Multiline属性不起作用的原因是,onSubmitEditing是一个用于处理文本输入框提交事件的属性。当用户在文本输入框中按下回车键时,会触发onSubmitEditing事件。在React Native中,TextInput组件的Multiline属性用于指定文本输入框是否可以输入多行文本。

然而,当onSubmitEditing属性设置为{true}时,表示在用户按下回车键后,会执行一个特定的操作,而不是换行。这个操作可以是提交表单、执行搜索等。因此,当onSubmitEditing设置为{true}时,TextInput的Multiline属性不会起作用,即使将Multiline设置为true,文本输入框也只能输入单行文本。

解决这个问题的方法是,将onSubmitEditing属性设置为一个函数,而不是{true}。在这个函数中,可以自定义处理回车键事件的逻辑。如果想要实现多行输入,需要将Multiline属性设置为true,并且不将onSubmitEditing属性设置为{true}。

以下是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { TextInput } from 'react-native';

const MyTextInput = () => {
  const [text, setText] = useState('');

  const handleTextChange = (newText) => {
    setText(newText);
  };

  const handleOnSubmitEditing = () => {
    // 处理回车键事件的逻辑
    // 可以在这里执行提交表单、执行搜索等操作
  };

  return (
    <TextInput
      multiline={true}
      onChangeText={handleTextChange}
      onSubmitEditing={handleOnSubmitEditing}
      value={text}
    />
  );
};

export default MyTextInput;

在上面的示例中,我们将Multiline属性设置为true,同时将onSubmitEditing属性设置为一个处理回车键事件的函数handleOnSubmitEditing。这样,TextInput组件就可以实现多行输入,并且能够自定义处理回车键事件的逻辑。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云移动开发平台:https://cloud.tencent.com/product/mpp
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云游戏多媒体引擎:https://cloud.tencent.com/product/gme
  • 腾讯云音视频通信(TRTC):https://cloud.tencent.com/product/trtc
  • 腾讯云云原生应用引擎:https://cloud.tencent.com/product/tke
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基础篇章:React NativeTextInput 讲解

(友情提示:RN学习,从最基础开始,大家不要嫌弃太基础,会同学请自行略过,希望不要耽误已经会同学宝贵时间) 今天我们讲解React Native基础系列之TextInput讲解,如果想学习更多开发知识或者移动开发文章...它还有一个onSubmitEditing属性,文本输入完被提交时候调用。...官网例子 import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native...相当于androidhint,有输入内容被清除。 placeholdertTextColor: 占位符文本颜色。 value: 文本输入框默认值。...onSubmitEditing: 结束编辑后,点击键盘提交按钮出发该事件。但是multiline={true}时候,该属性就会失效。

2.5K70

React NativeTextInput组件实现联想输入

multiline : 如果为true , 则是多行输入。 editable : 如果为false , 文本框不可输入。其默认值事true。 autoFocus : 如果为true, 将自动聚焦。...maxLength : 能够输入最长字符数。 enablesReturnKeyAutomatically : 如果值为true,表示没有文本键盘是不能有返回键。其默认值为false。...onSubmitEditing : 结束编辑后,点击键盘提交按钮出发该事件。 实例 在实际开发,我们经常会碰到联想输入情况,有的是结合后台返回,有的是本地联想。.../** * Sample React Native App * https://github.com/facebook/react-native * @flow TextInput自动提示输入..., TextInput, View } from 'react-native'; var Dimensions = require('Dimensions'); var ScreenWidth

3.2K100

React Native 小记 - TouchableOpacity 单次点击无效

网上类似的情况还有 “点击 TouchableOpacity ,要点击两下才会触发 onPress() ”、“在 ScrollView TouchableOpacity 需要在 TextInput...类似于 Android 原生开发『ListView Item 包含 EditText Button :EditText 与 Button 如何获取焦点、无法点击、ListView 不能滑动等...此外,在 stackoverflow 也搜索到相关回答,说是 ListView 也有此属性,但我本地 react-native-0.57.2 ListView 源码并没有此属性。...'handled',点击事件被子组件捕获,键盘不会自动收起。这样切换 TextInput 键盘可以保持状态。多数带有TextInput 情况下你应该选择此项。...TextInput ,并且增加了支持 ref 属性功能,可用于多处需要填写内容直接在键盘上点击下一项即自动进入下一项输入。

2.8K30

移动跨平台框架ReactNative输入组件TextInput【09】

React Native,是一个混合移动应用开发框架,是目前流行跨平台移动应用开发框架之一。React Native 采用不同方法进行混合移动应用开发。...React Native 输入组件 TextInput 输入组件 TextInput 就是让用户输入数据,比如输入登录有户名,输入登录密码。...除了简单单行输入框外,还可以用于输入大量文本,比如输入用户反馈,输入用户说明等等。 可以说,React Native 输入组件 TextInput 是 HTML 结合体。...React Native - 输入组件 TextInput TextInput 组件是 React Native 内置组件,不需要做额外安装 引入组件 要使用输入组件 TextInput,必须先引入...文本变更后回调函数,参数为输入框里文本 注意 使用 multiline={true} 和 numberOfLines={5} 可以设置输入框为多行模式,但它并不会在外观显示为多行,需要设置样式属性

1.8K30

react-native 全局屏蔽系统大字体

方法参考:字体适配 iOS 使用Text 一个属性 allowFontScaling={false} 但需要每个Text都要写一个这个属性,很麻烦,在不做封装情况下可以使用下面方法做全局设置...: 在项目写global变量地方加入: import { Text, TextInput } from 'react-native' Text.defaultProps.allowFontScaling...=false; TextInput.defaultProps.allowFontScaling=false; 上面修改了全局Text 、TextInputallowFontScaling默认值,如果项目使用了...react-navigation,还需要修改 headerTitleAllowFontScaling = false ,参考API 如果引入了react-native-flux-router ,在Tab...节点,加入allowFontScaling={false} 属性,屏蔽掉导航栏和TabBar字体变大 <Tabs key="root" allowFontScaling={false}

1.6K80

React Native之常用第三方库

前言 React Native出来一年多了,受到各大开发人员喜爱,但是由于只是专注于View层开发,因此在很多深层次还需要结合原生app做一定兼容,还有就是现在好多控件,如Android已是系统控件...sidemenu、checkbox、gridview等,这些在react native 系统是没有给我们提供,这时候就借助了第三方开源力量。...https://github.com/bartonhammond/snowflake 炫酷效果 TextInput https://github.com/halilb/react-native-textinput-effects.../react-native-create-library 影音相关 https://github.com/MisterAlex95/react-native-record-sound 录音... iOS 白屏解决 https://github.com/mehcode/rn-splash-screen Text跑马灯效果 https://github.com/remobile

8.7K101

React-day6

RN固有的组件; 最终,开发出来项目,是要运行到手机上,那么,如何把一个 RN 项目,完整发布到手机上去运行呢,这里,需要结合 签名打包步骤,并使用 RN 提供打包命令,进行完整 apk...,进行相关安装; 手机相关配置 使用数据线,把手机链接到电脑; 运行 adb devices 命令,这个命令,是开发环境提供; 需要先开启手机开发者模式 如果开启开发者模式之后,还是看不到设备...,则尝试安装 豌豆荚 这样工具,让这些工具帮助你在电脑安装手机驱动; 搭建RN项目 运行react-native init 项目名称来初始化一个react native项目; ?...打包运行项目,把打包好项目部署到手机! 确保手机已经正确链接到了当前电脑,同时手机开启了开发者调试模式;可以使用adb devices来查看当前链接到电脑手机设备列表!...确认手机正确链接到电脑之后,可以运行react-native run-android来打包当前项目,并把打包好项目以调试模式安装到手机! 打包完成之后截图 ?

1.4K10

React Native 每日一学(Learn a little every day)

如果你是一名React Native爱好者,或者有一颗热爱钻研新技术心,喜欢分享技术干货、项目经验、以及你在React Naive学习研究或实践一些经验心得等等,欢迎投稿《React Native...(2016-8-22) 开发真机调试是必不可少,有些功能和问题模拟器是无法重现,所以就需要配合真机测试,接下来就说下和iOS真机调试,不难,但是有很多细节需要注意 ###iOS 真机调试...在真机上运行方法与在模拟器运行一致,都是通过 react-native run-android 来安装并且运行你 React Native 应用。...网络中下 打开震动菜单 (摇动设备)->前往 Dev Settings->选择 Debug server host for device->输入调试用电脑局域网IP->点击 Reload JS 注:因为本人不是开发...,很简单 D2:React Native import 文件小技巧 (2016-8-19) 开发中经常需要 import 其他 js 文件,如果需要同时导入一些相关 js 文件,可以创建一个索引文件方便引用

1.9K90

React Native之ListView实现九宫格效果

概述 在原生开发,ListView是很常用一个列表控件,那么React Native(RN)如何实现该功能呢?...renderRow:渲染某一行,类似于BaseAdaptergetItem方法。 onEndReached:简单说就是用于分页操作,在中原生开发,我们需要自己实现相应方法。...(该属性是继承与ScrollView) renderHeader:渲染头部View,类似于ListViewaddHeader....以上属性基本可以解决一些常见列表需求,如果我们想要实现网格效果,也可以借助该组件来实现,有点类似于RecyclerView控件。...pageSize:渲染网格数,类似于GridViewnumColumns. contentContainerStyle:该属性是继承于ScrollView,主要作用于该组件内容容器

2.6K50

React Native性能优化:应该做和不应该做

这个库在iOS和都可用并且能够有效缓存图片 使用适当大小图片 如果React Native APP依赖于使用大量图像,那么优化图像对于APP性能是很重要。...因此在React可用优化方法也适用于React Native。一个优化方法就是避免不必要渲染,在函数组件可以通过使用React.memo()来完成。...这是一个给iOS、React Native使用平台 。它直接集成在原生代码,并且在React Native开箱即用。 使用Flipper调试app不需要远程调试。...React Native 0.60.4版本之后,Hermes在也可用了。...这有利于减少app下载体积(APK)、降低内存消耗和降低APP可交互时间 在APP开启Hermes引擎,需要打开build.gradle并且修改如下: def enableHermes =

4K30
领券