react native 中textInput的value属性详解_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > react native 中textInput的value属性详解

react native 中textInput的value属性详解

 2017/6/29 5:31:28  郭东生blog  程序员俱乐部  我要评论(0)
  • 摘要:TextInput用法就不多讲了,主要记录下遇到的一个怪问题。背景:项目需要开发一个充值页面,需要一个输入框,然后几个按钮,输入框是允许用户自己输入任意金额,按钮是可以让用户快捷选择金额。那么问题来了,一般来说是改变文本框的值就可以了。比如这样<TextInputplaceholderTextColor='#cccccc'underlineColorAndroid='transparent'keyboardType={'numeric'}style={styles.inputStyle
  • 标签:详解

TextInput用法就不多讲了,主要记录下遇到的一个怪问题。


    背景:项目需要开发一个充值页面,需要一个输入框,然后几个按钮,输入框是允许用户自己输入任意金额,按钮是可以让用户快捷选择金额。
    那么问题来了,一般来说是改变文本框的值就可以了。
    比如这样
<TextInput
    placeholderTextColor='#cccccc'
    underlineColorAndroid='transparent'
    keyboardType={'numeric'}
    style={styles.inputStyle}
    value ={this.state.money}
    onChangeText={(text)=>this.changeMoney(text)}
/>
然后在其他需要改变value值的地方,这样写
checkMoney(text) {
    this.setState({
        money: text
    });
}
乐观的情况是:我可以点击按钮可以改变文本框的值,也可以用户自己输入,
但是,但是,但是,重点来了,它根本不让你输入,光标一直闪烁。
看了文档,给的解释是:
	TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,
	不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入,
	可以考虑设置monospace; color: #c7254e">editable={false};如果你是希望限制输入的长度,可以考虑设置maxLength属性,这两个属性都不会导致闪烁。
然而加上没有什么卵用。
无奈只有再去找看看有没有什么可用的属性,没想到被我找到了,激动的要写一篇文章来记录下。

提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。

在一些简单的使用情形下,如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候,就可以用defaultValue来代替。

描述的还是云里雾里的,但是用defaultValue来代替value就能完美完成我的期望了。

发表评论
用户名: 匿名