React Hooks：将状态从一种模式保存到另一种模式

Question

我正在尝试使用 2 个嵌套模态创建待办事项列表创建器。每个模态框都将一个状态传递给 Todo 组件，然后将其发布在 App.js 中。 App.js 对 showModal1 的初始挂钩状态为 false，但当我按下按钮打开 Modal1.[=23 时，它变为 true =]

第一个模态 (Modal1) 应该将 task 状态传递给第二个模态 (Modal2)。

    import React,{useState} from 'react';
    import {StyleSheet, Text, View, TouchableOpacity, TextInput, Modal} from 'react-native';
    import {AntDesign} from '@expo/vector-icons';
    import Modal2 from './Modal2';

function Modal1(props) {
    const [showModal2, setShowModal2] = useState(false)
    const [task, setTask] = useState('')

    const toggleShowModal2 = (task) => {
        setShowModal2(!showModal2);     
    }

    function handleTask(value) {
        setTask(value)
    }

        return(
            <View behavior='padding'>
                <Modal animationType='slide' visible={showModal2} onRequestClose={toggleShowModal2}>
                    <Modal2 closeModal={toggleShowModal2}/>
                </Modal>
                <TouchableOpacity onPress={props.closeModal}>
                    <AntDesign name='close' size={24} color='black'/>
                </TouchableOpacity>

                <View>
                    <Text>First Step</Text>

                    <Text>Task</Text>
                    <TextInput placeholder='What is the task?' value={task} onChangeText={handleTask}/>
                </View>
                <View>   
                    <TouchableOpacity onPress={() => toggleShowModal2(task)}>                                   
                            <AntDesign name='arrowright' size={40} color='black'/>           
                    </TouchableOpacity> 
                </View>                             
            </View>
    );
};

并且第二个模态应该能够通过 time 状态，然后使用状态值创建 Todo。

import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, View, KeyboardAvoidingView, TouchableOpacity, TextInput, ScrollView} from 'react-native';
import {AntDesign} from '@expo/vector-icons';

function Modal2(props) {
    const [time, setTime] = useState('')
  
    function handleTime(value) {
        setTime(value)
    }

    function createTodo(){
        const list = {task, time};  
        setTask('')
        setTime('')
        
        props.addList(list);
        props.closeModal();
    } 

        return(
            <View behavior='padding'>
                <TouchableOpacity onPress={props.closeModal}>
                    <AntDesign name='close' size={24} color='black'/>
                </TouchableOpacity>

                <View>
                    <Text>Second Step</Text>

                    <Text>Time</Text>
                    <TextInput placeholder='When are you going to do it?' value={time} onChangeText={handleTime}/>
                </View>
                <View>   
                    <TouchableOpacity onPress={createTodo}>                                    
                            <AntDesign name='arrowright' size={40} color='black'/>           
                    </TouchableOpacity> 
                </View>                             
            </View>
    );
};

但是，每当我尝试发布 Todo 时，都会弹出以下错误：

ReferenceError: Can't find variable: task

我是 React（和 React Hooks）的新手，我不知道是否可以用类似的方式将状态从一个函数保存到另一个函数。

Answer 1

为了访问另一个组件中定义的变量，您需要将它们作为 props 传递，

所以你可以在 Modal1

中将变量作为 props 传递

...
  <Modal2 closeModal={toggleShowModal2} task={task} setTask={setTask} />
...

并像这样在 Modal2 中访问它们，

   function createTodo(){
        const { task, setTask } = props;

        const list = { task, time };  
        setTask('')
        setTime('')
        
        props.addList(list);
        props.closeModal();
    }

React Hooks：将状态从一种模式保存到另一种模式

React Hooks: saving state from one modal to another

javascript

reactjs

react-native

react-native-android

react-hooks