这个是很无语的一个坑,算是一个小坑,不过最容易坑的就是有惯性思维的人,在此记录一下
一、问题来源
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