0

我正在尝试更改此议程中仅一项的背景，但是使用我的代码，当我单击一项时，它会更改所有项的背景颜色，而不仅仅是我单击的一项：单击前单击 后单击。我还想将我的状态值存储在 redux 中，以便我可以在我的应用程序的其他地方显示屏幕，同时保留绿色。

这是我日历中的代码：

import React, {useState, useCallback, useEffect} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
} from 'react-native';
import { useSelector, useDispatch } from "react-redux";
import { Avatar, Card } from 'react-native-paper';
import {Agenda} from "react-native-calendars";
import { toggleActive} from "../store/actions/calendar";
import * as firebase from "firebase";

const activeItemText = 'Réservé';
const activeItemStyles = {
    backgroundColor: 'lightgreen',
    backgroundColor2: 'white',
};
const inactiveItemText = 'Disponible';
const inactiveItemStyles = {
    backgroundColorPrimary: 'white',
    backgroundColorSecondary: 'white',
};

const timeToString = (time) => {
    const date = new Date(time);
    return date.toISOString().split('T')[0];
};

const CalendarItem = ({item, firstItemInDay}) => {
  //  const [active, setActive] = useState(false);
    const dispatch = useDispatch();

    const active = useSelector(state => state.calendar.active);

    const toggleActiveHandler = useCallback(() => {
        dispatch(toggleActive())
    }, [dispatch]);




   // const [active1, setActive1] =  React.useState(false);

  //  console.log(active);
   /* const changeColor = () => {
       setActive(!active)
    };
    */

    return (
        <TouchableOpacity
            style={{marginTop: 17, marginRight: 10}}
            onPress={toggleActiveHandler}>
            <Card style={active ? activeItemStyles : inactiveItemStyles}>
                <Card.Content>
                    <View
                        style={{
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}>
                        <Text>{active ? activeItemText : inactiveItemText}</Text>
                        <Avatar.Text label="J" />
                    </View>
                </Card.Content>
            </Card>
        </TouchableOpacity>
    );
};

const renderItem = (item, firstItemInDay) => {
    return <CalendarItem item={item} firstItemInDay={firstItemInDay} />;
};

const calendarScreen = () => {
    const [items, setItems] = useState({});

    const loadItems = (day) => {
        setTimeout(() => {
            for (let i = -15; i < 85; i++) {
                const time = day.timestamp + i * 24 * 60 * 60 * 1000;
                const strTime = timeToString(time);

                if (!items[strTime]) {
                    items[strTime] = [];
                    const numItems = 1;
                    for (let j = 0; j < numItems; j++) {
                        items[strTime].push({
                            name: inactiveItemStyles.texte,
                            height: Math.max(50, Math.floor(Math.random() * 150)),
                        });
                    }
                }
            }
            const newItems = {};
            Object.keys(items).forEach((key) => {
                newItems[key] = items[key];
            });
            setItems(newItems);
        }, 1000);
    };

    return (
        <View style={{flex: 1}}>
            <Agenda
                items={items}
                loadItemsForMonth={loadItems}
                selected={'2020-09-23'}
                renderItem={renderItem}
            />
        </View>
    );
};

export default calendarScreen;

这是我的减速器：

import { TOGGLE_ACTIVE } from "../actions/calendar";


const initialState = {
    active: false
};


const calendarReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_ACTIVE :
            console.log(state);
            console.log(!!state);
            return {
                active: !!state};
        default:
            return state
    }
};

export default calendarReducer;

这是我的行动：

export const TOGGLE_ACTIVE = 'TOGGLE_ACTIVE';

export const toggleActive = () => {
    return    { type: TOGGLE_ACTIVE }
};

非常感谢您的帮助！

4

1 回答 1

0

您只是在保存活动状态，这就是为什么它会改变所有人的背景。原因，它无法区分您更改了哪个 state 。因此，请保留您单击的项目中的一些唯一数据，以便与其他项目进行比较。如果 redux 数据匹配更改背景，否则不匹配。

于 2020-10-21T12:05:07.640 回答