react native 的TextInput组件问题

这个是很无语的一个坑，算是一个小坑，不过最容易坑的就是有惯性思维的人，在此记录一下

一、问题来源

1、项目要求修改一个设备的名称，名称要直接显示数据库中查出来的名称，然后修改，保存。

2、我以为就是普通的input框，因此，我是这样写的：

 <TextInput
                    value="{this.state.data.device_name}"style={sscStyle.input}maxLength={7}onChangeText={(text) => {this.form_text(text); }  }></TextInput>

就是相当于把value值直接显示出来，然后进行修改

3、碰到的问题：
无论如何都修改不了输入框的值，输入时闪烁，且无法输入文字，好吧，我一脸懵逼。

二、解决办法

1、百度之后才知道，RN的官网是这么说的：

TextInput是一个受约束的(Controlled)的组件，意味着如果提供了value属性，原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好，不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入，可以考虑设置editable={false}；如果你是希望限制输入的长度，可以考虑设置maxLength属性，这两个属性都不会导致闪烁

2、现在知道问题所在了，原来是value值惹的祸，接下来小小的改进一下：

<TextInput
            style={sscStyle.input}maxLength={7}onChangeText={(text) => {this.form_text(text); }  }>{this.state.data.device_name}
</TextInput>

OK了，这样写完全没毛病
三、两种解决办法
1、用defaultValue 代替value的值
2、按我这种写法，在标签的中间输入值

参考链接：http://www.jianshu.com/p/a8923325531e

end

react native 的TextInput组件问题相关推荐

React Native 中 TextInput 组件和中文输入冲突
原文转载自我的 Github 博客在用 React Native (下称 RN) 开发面向国人的应用时,不可避免会有用户使用中文输入法的情景.在 RN 中,负责输入内容的控件是 <TextIn ...
React Native的TextInput组件去掉下划线和使用背景图片
最近做RN,由于先做的是比较简单的部分,所以没碰到什么难点.真正的难点还在后面,所以这周就记录一下几个小问题.也是比较常用的小问题了. 一.TextInput组件去掉下划线和加上边框不得不说,RN自 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
android input 点击事件失效,React Native：TextInput元素上的onContentSizeChange事件在Android上不起作用...
我在Android设备上的TextInput事件'onContentSizeChange'出现问题. 实际上,当我输入消息直到行尾并且文本进入下一行时,TextInput的高度不会更新.React N ...
React Native手势密码组件
本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 这次介绍的React Native手势密码组件为react-native-gesture-password,纯JavaScript ...
初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
React Native悬浮效果组件
由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了<React Native移动开发实战>后,对于React Native的关注就比较少了.最近 ...

react native 的TextInput组件问题

react native 的TextInput组件问题相关推荐

最新文章

热门文章