突出显示所选项目 onPress答案

【问题标题】：Highlight selected item onPress突出显示所选项目 onPress
【发布时间】：2021-03-25 14:44:50
【问题描述】：

我试图在单击时将所选项目状态设置为 true，一旦我单击另一个项目，将其设置为 false，并将新单击的项目设置为 true。到目前为止，我的 setActiveItem 钩子正在返回或无法识别或从未改变状态。

const [activeItem, setActiveItem] = useState(false);

    //                          setActiveItem={setActiveItem}

    const onClick = (item) => {
        setActiveItem(true);
        console.log(item);
    };
    if (!options || !options.length) {
        return false;
    }

    return (
        <View style={styles.main}>
            <View style={styles.container}>
                <Text style={styles.title}>{title}</Text>
                <View style={styles.titleContainer} />
                <FlatList
                    key={options.value}
                    data={options}
                    renderItem={({ item, index }) => (
                        <TextComponent
                            {...otherProps}
                            onTypeFilterChange={onTypeFilterChange}
                            style={styles.item}
                            type={item.value || ALL_MEDIA_TYPES}
                            title={item.label}
                            item={item}
                            setActiveItem={() => onClick(item.selected)}
                            // isActive={activeItem === true}
                        >
                            {item.value}
                        </TextComponent >
                    )}
                />
            </View>
        </View>
    );

在我的 TextComponent 上：

const TextComponent = ({
    type,
    title,
    onTypeFilterChange,
    item,
    isActive,
    setActiveItem,
}) => {
    const onTextComponentClick = useCallback(() => {
        onTextChange(type);
        setActiveItem((item) => !item.selected);
        console.log(item);
    }, [type]);

    const defaultColor = 'rgb(180, 180, 180)';
    const selectedItem = 'rgb(19, 186, 247)';
    return (
        <TouchableOpacity onPress={onTextChange}>

我可以获取组件的值，根据我单击的内容显示不同的值，但我无法更改属性的状态值。有什么帮助吗？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

好的，所以我将建议您对执行此操作的方式进行一些更改。

我会将您的初始行更改为：

const [activeItem, setActiveItem] = useState(null);

然后在您的onClick 中，我会执行以下操作：

const onClick = (item) => {
    setActiveItem(item.id); // Or whatever unique identifier you have in your items
    console.log(item);
};

那我是你的TextComponent 我要这个：

isActive={activeItem === item.id} // Or whatever key you used earlier

这样，当您更改它时，列表将重新呈现，并且您新选择的项目应突出显示。

【讨论】：