reactjs – Checked – Unchecked在ListView中不起作用

朋友我将集成检查 – 未选中listView.因此,当用户单击选中然后将数据存储在数组中并取消选中,然后我将删除数据.它的工作正常,但在检查后UI不会更新 – 未选中.

<List containerStyle={{marginTop : 0,borderBottomWidth : 0,borderBottomColor : 'black',borderTopWidth : 0}}>
  <FlatList
    data={this.state.list}
    renderItem={({ item }) => (
      <ListItem containerStyle={{height: 80,backgroundColor : 'transparent',borderTopWidth : 0}}
        title={
          <View style={styles.titleView}>
            <Text style={styles.ratingText}>{item.iWorkerID.vFirstName}</Text>
          </View>
        }
        rightIcon={
           <TouchableOpacity onPress = {() => this.selectedWorker(item)} style={{width: 30,height: 30,marginTop : 10,marginRight : 30}}>
             <Image style = {{width: 30,height: 30}} source={this.state.selectedList.includes(item) ? require("./Images/uncheckd.png") : require("./Images/checked.png")}/>
             {/* {this.state.selectedList.includes(item) && <Image style = {{width: 30,height: 30}} source={require("./Images/uncheckd.png")}/>}
             {!this.state.selectedList.includes(item) && <Image style = {{width: 30,height: 30}} source={require("./Images/checked.png")}/>} */}

           </TouchableOpacity>
        }
        avatar={<Avatar
          rounded
          medium
          containerStyle={{marginLeft: 30}}
          source={{uri: Globle.IMAGE_URL+item.vProfileImage}}
          activeOpacity={0.7}
        />}
      />
    )}
  />
</List>

在check / uncheck按钮上,我将添加/删除数组中的对象,

selectedWorker = (data) =>{
  console.log('data is ',data);

  if (!this.state.selectedList.includes(data)) {
      // this.setState({ selectedList : [...this.state.selectedList,data]})
      this.state.selectedList.push(data);
  } else {

    var index = this.state.selectedList.indexOf(data);
    if (index > -1) {
        this.state.selectedList.splice(index,1);
    }
  }

  this.setState({list : this.state.list})
  console.log('selected list',this.state.selectedList);
}

主要问题：想要根据selectedList数组更新图像选中/取消选中,如何更新listView中的项目.

在selectedWorker方法中做什么.

GIF：

你在List中使用Flatelist,两者都是列出项目的组件.你可以使用List或Flatelist,而不是两者.
我希望它会帮助你..

我尝试使Demo类似于你想要的.

constructor(props) {
    super(props)
    this.state = {
        list: [
            {
                id: 1,name: "Harpal Singh Jadeja",avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },{
                id: 2,name: "Kirit Mode",{
                id: 3,name: "Rajiv Patil",{
                id: 4,name: "Chetan Doctor",avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            }]


    };
};


renderListItem = (index,item) => {
    return (
        <View style={styles.notification_listContainer}>
            <Image source={{uri: item.avtar,cache: 'force-cache'}}
                   style={circleStyle}/>

            <View style={{flex: 1,paddingLeft: 10,justifyContent: 'center'}}>
                <Label roboto_medium
                       align='left'
                       color={Color.TEXT_PRIMARY}
                       numberOfLines={1}>
                    {item.name}
                </Label>
                <Label roboto_medium
                       small
                       align='left'
                       color={Color.TEXT_SECONDARY}
                       mt={8}>
                    Programmer
                </Label>
            </View>

            <View style={{justifyContent: 'center'}}>
                <TouchableHighlight
                    style={{
                        backgroundColor: item.isSelected ? Color.BLACK : Color.TEXT_SECONDARY,alignItems: 'center',justifyContent: 'center',height: 40,width: 40,borderRadius: 20
                    }}
                    onPress={this.onSelectWorker.bind(this,index,item)} underlayColor={Color.BLACK}>
                    <Icon name='done'
                          size={20}
                          color={Color.WHITE}/>
                </TouchableHighlight>
            </View>
        </View>
    );

};
onSelectWorker = (index,item) => {
    console.log("Selected index : ",index);
    let tempList = this.state.list;
    tempList[index].isSelected = tempList[index].isSelected ? false : true
    this.setState({
        list: tempList
    });

};
render() {
    return (
        <View style={styles.notification_Container}>
            <FlatList
                data={this.state.list}
                renderItem={
                    ({index,item}) => this.renderListItem(index,item)
                }
                keyExtractor={item => item.id}
                extraData={this.state}
            />
        </View>
    )
}

reactjs – Checked – Unchecked在ListView中不起作用 – React Native

猜你在找的React相关文章