Fatal编程技术网
  • reactjs/
  • Reactjs 选中-未选中不'；t在ListView中工作-反应本机

Reactjs 选中-未选中不'；t在ListView中工作-反应本机

reactjs react-native

Reactjs 选中-未选中不'；t在ListView中工作-反应本机,reactjs,react-native,react-native-android,react-native-ios,react-native-listview,Reactjs,React Native,React Native Android,React Native Ios,React Native Listview,朋友我将在列表视图中选中-未选中。因此，当用户单击checked，然后将数据存储在数组中，然后单击unchecked，我将删除数据。其工作正常，但用户界面在选中-取消选中后不会更新 <List containerStyle={{marginTop : 0 , borderBottomWidth : 0 , borderBottomColor : 'black', borderTopWidth : 0}}> <FlatList data={this.state.lis

朋友我将在列表视图中选中-未选中。因此，当用户单击checked，然后将数据存储在数组中，然后单击unchecked，我将删除数据。其工作正常，但用户界面在选中-取消选中后不会更新

<List containerStyle={{marginTop : 0 , borderBottomWidth : 0 , borderBottomColor : 'black', borderTopWidth : 0}}>
  <FlatList
    data={this.state.list}
    renderItem={({ item }) => (
      <ListItem containerStyle={{height: 80, backgroundColor : 'transparent', borderBottomWidth : 0, 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>
主要问题：要根据selectedList数组更新选中/未选中的图像，如何更新listView中的项

在selectedWorker方法中执行的操作

GIF:

您需要根据项目的唯一id向ListItem添加一个键，以便React能够区分呈现的项目

当您使用数组的索引作为键时，React将进行优化，并且不会正确渲染。在这种情况下会发生什么可以用一个例子来解释

假设React渲染一个包含10个项目的数组，并渲染10个组件。假设第5项随后被删除。在下一次渲染时，React将接收9个项目的数组，因此React将渲染9个组件。这将显示为第10个组件被删除，而不是第5个，因为React无法根据索引区分项目

因此，始终使用唯一标识符作为从项目数组呈现的组件的键。

您在列表中使用的扁平列表，两者都是列出项目的组件。您可以使用列表或扁平列表，但不能同时使用两者。 我希望这对你有帮助

我试着制作类似于你们想要的演示

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",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 3,
                name: "Rajiv Patil",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                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>
    )
}

构造函数（道具）{
超级（道具）
此.state={
名单：[
{
id:1，
姓名：“哈帕尔·辛格·贾德贾”，
avtar:“https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
},
{
id:2，
名称：“Kirit模式”，
avtar:“https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
},
{
id:3，
姓名：“拉吉夫·帕蒂尔”，
avtar:“https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
},
{
id:4，
姓名：“车坛医生”，
avtar:“https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
}]
};
};
renderListItem=（索引，项目）=>{
返回(
{item.name}
程序员
);
};
onSelectWorker=（索引，项目）=>{
日志（“所选索引：”，索引）；
让tempList=this.state.list；
tempList[index]。isSelected=tempList[index]。isSelected？false:true
这是我的国家({
名单：圣殿骑士
});
};
render（）{
返回(
此.renderListItem（索引，项）
}
keyExtractor={item=>item.id}
extraData={this.state}
/>
)
}

我不确定你的问题是什么。数组是否未更新您正在单击的项目，但正在更新某些其他项目，例如最后一个项目？是否图像不会根据数组而更改。是否要在按下按钮时更新listView中的图像：请为这个创建一个plunker好吗？是的，我将创建wait.ok。我将添加密钥，但如何更新图像，这意味着数据已检查图像或未检查图像。有关此的帮助： 
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",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 3,
                name: "Rajiv Patil",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                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>
    )
}