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

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铁柱同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值