Question

我有一个数组中的对象列表（ tagList ）。单击时，对象将被推入另一个数组（ selectedTags ）。

var selectedTags = [];

export default class RegisterTags extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tagList: [],
        }
    }

    insertTag = (tag) =>{
        selectedTags.push(tag)
    }

    render() {
        var tagsToRender = this.state.tagList.map((tag) => {
            return(
                <TouchableOpacity key={tag.id} onPress = {() => {this.insertTag(tag) }}> 
                    <View style={styles.tagStyle}>
                        <Text style={styles.tagText}>{tag.name}</Text>
                    </View>
                </TouchableOpacity>
            )
        })

        return(
            <View style={styles.container}>
                <ScrollView contentContainerStyle={styles.ScrollViewContainer}>
                    {tagsToRender}
                </ScrollView>
            </View>
        )
    }
}

我想动态更改 selectedTags 中标记的视图样式。我想过使用lodash的_.includes(selectedTags, tag)来检查标签是否包含在selectedTags中，但这不起作用。如何在按下标签时动态更改所选标签的样式？

Answer 1

只需检查选定标签中是否存在标签并指定selecedTag样式：

var tagsToRender = this.state.tagList.map((tag) => {
        var selected = selectedTags.indexOf(tag) > -1
        var style = selected ? styles.selectedTagStyle : styles.tagStyle
        return(
            <TouchableOpacity key={tag.id} onPress = {() => {this.insertTag(tag) }}> 
                <View style={style}>
                    <Text style={styles.tagText}>{tag.name}</Text>
                </View>
            </TouchableOpacity>
        )
    })

通过与另一个数组进行比较，在按下时更改数组中项目的样式

1 个答案: