javascript - 将数据传递给 react native modal

Question

有人可以帮助将数据传递给模态吗？.map 函数从 data [] 数组（滑块需要）返回月份名称，我也想在模态视图中显示那个特定的月份。

目前看来：

和模态：

期望：

不幸的是，模态中只有 [] 的第一个月可见。

我还将 .js 文件进行审查：

import React, { useContext, useState } from 'react';
import { AuthenticatedUserContext } from '../AuthenticatedUserProvider';
import { Swiper } from 'react-native-swiper';
import Modal from 'react-native-modal';
import { db } from '../firebase';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { View, Text, TouchableHighlight, StyleSheet, Button, TextInput, TouchableOpacity } from 'react-native';

const data = [
    { id: 1, name: 'Month1' },
    { id: 2, name: 'Month2' },
    { id: 3, name: 'Month3' }
];

export default function HomeScreen() {

    const { user } = useContext(AuthenticatedUserContext);

    const [ isModalVisible, setModalVisible ] = useState(false);
    const [ months, setMonths ] = useState(data);
    const [ values, setValues ] = useState({
        budget: '',
        month: '',
    });

    const toggleModal = () => {
        setModalVisible(!isModalVisible);
     
    };



    const onSave = () => {
        setValues({ ...values, userId: user.uid });
        setModalVisible(!isModalVisible);
        db.collection('Budget').add({
            userId: user.uid,
            budget: values.budget,
        });
    };

    return (
        <Swiper showsButtons={true} showsPagination={false} buttonWrapperStyle={{ alignItems: 'flex-start' }}>
            {months.map((months, i) => (
                <View key={i} style={styles.slider}>
                    <Text style={styles.text}> {months.name}</Text>
                    <View>
                        <View style={styles.mainCardView}>
                            <TouchableOpacity
                                onPress={
                                    toggleModal
                                }
                                style={{ flex: 1, alignItems: 'flex-end', marginTop: 20 }}
                            >
                                <FontAwesome name="pencil-square-o" color="black" size={30} />
                            </TouchableOpacity>
                        </View>
                    </View>
                    <Modal isVisible={isModalVisible} style={{ margin: 0 }}>
                        <Text style= {{marginLeft: 50, color: '#fff'}}>Current month: {months.name}</Text>
                        <TextInput
                            style={{
                                height: 40,
                                borderColor: 'white',
                                borderWidth: 1,
                                color: 'white',
                                shadowColor: 'white',
                                margin: 50,
                                padding: 5,
                                marginVertical: 10,
                            }}
                            onChange={(e) => setValues({ ...values, budget: e.target.value })}
                            value={values.budget}
                            placeholder="Budget"
                            keyboardType="decimal-pad"
                            placeholderTextColor="#fff"
                        />
                        <TouchableHighlight
                            style={{
                                height: 40,

                                borderRadius: 10,
                                backgroundColor: 'gray',
                                marginLeft: 50,
                                marginRight: 50,
                                marginTop: 20,
                            }}
                        >
                            <Button
                                onPress={onSave}
                                title="Confirm"
                            />
                        </TouchableHighlight>
                        <TouchableHighlight
                            style={{
                                height: 40,
                                borderRadius: 10,
                                backgroundColor: 'gray',
                                marginLeft: 50,
                                marginRight: 50,
                                marginTop: 20,
                            }}
                        >
                            <Button
                                onPress={toggleModal}
                                title="Back"
                            />
                        </TouchableHighlight>
                    </Modal>
                </View>
            ))}
        </Swiper>
    );
}

Answer 1

这里有几个建议：

• {months.map((months, i) => (...))}我不建议将months其用作地图中的当前项目，因为它令人困惑。相反，我会推荐类似的东西，months.map((month, i) => ())}因为实际上您指的是地图中的一个月。

• 您正在地图中渲染模式，因此每个月都有自己的模式。但是您一次只能渲染一个模态，因此您可以将模态放在地图之外，并以某种方式将模态指向当前活动的月份（见下文）

• 如果你有另一个状态，比如const [activeMonth, setActiveMonth] = useState(). 然后，当您单击其中一个月份时，您可以将模式状态设置为打开，并设置 activeMonth 状态。然后在模式中，它只会根据当前活动月份显示状态。似乎您可以利用您的values状态来做到这一点！