关于RN listview item ref

前端之家收集整理的这篇文章主要介绍了关于RN listview item ref前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

背景

在使用React Native的过程中,使用ListView渲染一个列表时,有时候需要操作item中某个控件,比如调用该控件的某个方法,我们知道要调用方法之前需要获取到该控件的对象引用,那么我们就开始尝试获取控件的引用对象。

项目中的实际场景是:有一个电影观看历史列表,列表的每一行有个复选框CheckBox,勾选这一行的复选框后支持删除操作,虽然每一行的单独操作可以实现勾选/取消功能,但是同时又要实现全选/反选操作,这时候当点击全选按钮后,需要遍历每一个item中的CheckBox进行勾选操作来实现全选功能

遇到的问题

获取控件的引用对象,在RN是使用ref来获取的,ListView->renderRow,这是渲染每一行的代码

renderRow={this._renderMovieView.bind(this)}

_renderMovieView方法

_renderMovieView(movie){
    return(
    <CheckBox
        ref="myCheckBox"
        >
    </CheckBox>)
}

movie是每一行的电影数据结构对象,CheckBox组件有一个check(isChecked)方法

如果我们像上面那样来定义ref,这时候,通过下面的方式来获取CheckBox对象引用

this.refs.myCheckBox.check(true)

这样你会发现,永远只有最后一个有响应,这是因为每一行item的CheckBox的ref名称是相同的,导致只有最后渲染的那一行的CheckBox的ref是有效的。那么,我们就想为每一行CheckBox定义唯一的ref

_renderMovieView(movie){
    return(
    <CheckBox  ref={`myCheckBox${movie.id}`} > </CheckBox>) }

需要注意的是这里的引号是反引号(键盘左上角1键左边的那个键),不是单引号也不是双引号

这里movie有个id属性,通过movie的id唯一性来定义CheckBox ref的唯一性,这样我们理所当然的可以像上面的方法获取引用对象

假设有个movie.id=1

this.refs.myCheckBox1.check(true)

这时候问题就来了,会报undefined错误!我的第一直觉告诉我怎么可能会这样!(到现在我也不知道为什么会这样,有知道的可以告诉我下,毕竟我也是刚开始学习的,不懂的很多)。然后,我试着打印出this.refs,里面确实是空,什么也没有,自然就undefined了,无解。。。换个方法。。。

解决方

上面提出问题的那个方法,是RN定义ref 的其中一种方式,另一种方式还可以这样

<CheckBox
    ref={(Box)=>{
        this.myCheckBox=Box;
    }}
    >
</CheckBox>

那么就可以使用myCheckBox对象了

this.myCheckBox.check(true);

接下来我们的解决方案就是使用这种方式

var CheckBoxRefs = {};

_renderMovieView(movie){
    return(
    <CheckBox  ref={(Box)=>{ CheckBoxRefs[`myCheckBox${movie.id}`]=Box; }} > </CheckBox>) }

定义了一个CheckBoxRefs map(key/value)对象,CheckBoxRefs的key是唯一名称,value是CheckBox引用对象(实例),然后在使用的时候如下

for (var key in CheckBoxRefs){
    var item = CheckBoxRefs[key];
    if(item){
        item.check(true);
    }
}

这样就实现了CheckBox全选的功能了。

react native 的issues上还提供了另一种解决方案,但我还没有验证过,有兴趣的可以去看看 Get refs to ListView rows

如果想看本章内容的完整实现代码,可以到我的github查看ViewsHistoryScene.js

猜你在找的React相关文章