React-native 的坑 之TextInput value属性

项目背景

需要做一个Listview 每个条目都有一个输入框,然后默认的不可以编辑,旁边有个编辑键,点击的话就能编辑


<TextInput style={styles.label_name} editable={this.state.rowData.isEdit} multiline={false} autoFocus={false} maxLength={10} numberOfLines={1} blurOnSubmit={true} value={this.props.model.name} onSubmitEditing={()=>this.props.onSubmitEdit(this.state.rowData)} underlineColorAndroid={'transparent'}>{this.state.rowData.name}</TextInput>

然后在submit 函数类着这样写

submit(){ this.setState({ .....//省略,其实重绘之后 就会设置成你编辑的文字 }); }

但是问题来了,文本框虽然在可编辑的情况下但是一直不能输入文字,而且一直闪烁,引用官方的话说:

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

我在这有两种解决办法

  1. 用defaultValue 代替
  2. 写成<TextInput>{model.name}</TextInput>这种形式

总结

react 坑路慢慢修远兮,吾将上下而求索

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一. 简介 TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,...
    飞奔的小马阅读 3,211评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,027评论 19 139
  • http://www.cnblogs.com/Sweet-Candy/p/5695389.html React-N...
    心淡然如水阅读 4,399评论 0 0
  • 对React-Native的学习,从熟悉基本控件开始。 View 属性方法 序号名称属性Or方法类型说明 1 ac...
    诺花生阅读 885评论 0 0
  • TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成...
    亭止阅读 3,299评论 1 0