在 React Native 中，在 Flat-list 的 RenderItem 内更新被点击的按钮状态答案

【问题标题】：Updating button state which is clicked, inside RenderItem of Flat-list, in React Native在 React Native 中，在 Flat-list 的 RenderItem 内更新被点击的按钮状态
【发布时间】：2020-06-26 20:08:27
【问题描述】：

我是 React Native 的新手，并试图完成类似下面的事情，其中来自服务器的简单列表正在使用按钮呈现在列表中。按钮在点击后将被禁用并更改不透明度。

我能够创建 UI，但是当我单击任何显示加入的按钮时，之前单击的按钮会将其状态重置为原始状态。也就是说，只有一个按钮始终显示点击状态。

所以我的代码类似于

constructor(props){
   super(props);
   this.state = {selectedIndices: false, groupsData: ''};
}

渲染方法中的Flatlist看起来像

<FlatList style={styles.list}
 data={this.state.groupsData}
 keyExtractor={(groups) => {
     return groups.groupId.toString();
 }}
 renderItem={(item, index) => {
     return this.renderGroupItem(item);
 }}/>

渲染组项

renderGroupItem = ({item} )=>(
    <GroupItem group = {item} style={{height: '10%'}} onPress = {() => this.onJoinButtonPress(item)} 
    index = {this.state.selectedIndices}/>
)

onJoinButtonPress

onJoinButtonPress = (item) =>{
    this.setState({selectedIndices: true});
}

组项

render(){
        if(this.props.group.groupId === this.props.index){
            return(
                <View style = {[styles.container]}>
                    <Image source={{uri: 'some Image Url'}} style={styles.roundImage}/>
                    <Text style={styles.groupText}>{this.props.group.name}</Text>
                    <View >
                        <TouchableOpacity style = {[styles.button, {opacity: 0.4}]} activeOpacity = { .5 } onPress = {this.props.onPress} 
                        disabled = {true}>
                            <Text style = {{color: 'white', fontSize: 12}}>Joined</Text>
                        </TouchableOpacity>
                    </View>                
                </View>
            );
        }else{
            return(
                <View style = {styles.container}>
                    <Image source={{uri: 'Some Image Url'}} style={styles.roundImage}/>
                    <Text style={styles.groupText}>{this.props.group.name}</Text>
                    <View >
                        <TouchableOpacity style = {styles.button} activeOpacity = { .5 } onPress = {this.props.onPress}>
                            <Text style = {{color: 'white', fontSize: 12}}>Join</Text>
                        </TouchableOpacity>
                    </View>                
                </View>
            );
        }
    }

现在我知道我需要传递一个数组或 hasmap，其中包含已单击项目的映射，但我不知道该怎么做。在这里需要绝望的帮助。

【问题讨论】：

您应该使用按下项目的 id 更新 groupsData 而不是使用索引，为什么要使用布尔值作为索引？
我的问题最终通过这个链接解决了hackernoon.com/…

标签： react-native react-native-flatlist

【解决方案1】：

在 groupsData 中维护一个布尔值后，我能够克服上述问题。选择后，我会更新 groupsData 中的布尔“groupsJoined”并更新将调用渲染的 groupsData 的状态。在 GroupsItem 类中，我添加了一个检查，如果来自 props 的数据已加入Groups 为 true，则呈现选定状态，否则呈现非选定状态。

礼貌https://hackernoon.com/how-to-highlight-and-multi-select-items-in-a-flatlist-component-react-native-1ca416dec4bc

【讨论】：