React & Formik，在组件之间传递数据

Question

我是 React 的初学者。我正在尝试创建我的第一个 ToDo 应用程序。目前，我有两个组件 - 一个带有输入和提交按钮（用于输入数据） - 使用 formik 创建，第二个 - 我想要显示此数据的简单组件。我不确定如何在这些组件之间传递数据，我正在寻找有关如何正确传递数据的提示。

这是我的代码：

第一个组件（输入数据）：

import React from "react";
import { Formik } from "formik";
import { View, Button, TextInput } from "react-native";

function MyForm(props) {
  return (
    <View>
      <Formik
        initialValues={{ task: "" }}
        onSubmit={(values) => console.log(values)}
      >
        {({ handleChange, handleSubmit }) => (
          <>
            <TextInput
              onChangeText={handleChange("task")}
              placeholder="Write a task"
            />

            <Button onPress={handleSubmit} title="Click" />
          </>
        )}
      </Formik>
    </View>
  );
}

export default MyForm;

第二个组件（显示数据）：

import React from "react";
import { View, Text } from "react-native";
import MyForm from "./MyForm";

const TaskContainer = (props) => {
  return (
    <View>
      <Text>Here is your list:</Text>
    </View>
  );
};

export default TaskContainer;

Here 是我想在第二个组件中显示的简单示例：

如有任何建议，我将不胜感激

Answer 1

您的问题的解决方案是在 Parent component 中创建您的任务语句。之后使用 callback function（通过 props 传递）更改其值（我使用 useCallback 钩子来防止子组件的无用重新渲染）：

父组件

import React from 'react';

const ParentComponent = () => {
  const [tasks, setTasks] = React.useState([]);

  const addTask = React.useCallback(
    (newTask) => {
      setTasks([...tasks, newTask]);
    },
    [tasks]
  );

  return (
    <>
      <MyForm tasks={tasks} addTask={addTask} />
      <TaskContainer tasks={tasks} />
    </>
  );
};

表单组件

import React from 'react';
import { Formik } from 'formik';
import { View, Button, TextInput } from 'react-native';

function MyForm({ tasks, setTasks }) {
  return (
    <View>
      <Formik
        initialValues={{ task: '' }}
        onSubmit={(values) => setTasks(values)}>
        {({ handleChange, handleSubmit }) => (
          <>
            <TextInput
              onChangeText={handleChange('task')}
              placeholder="Write a task"
            />

            <Button onPress={handleSubmit} title="Click" />
          </>
        )}
      </Formik>
    </View>
  );
}

export default MyForm;

任务组件

import React from 'react';
import { View, Text } from 'react-native';
import MyForm from './MyForm';

const TaskContainer = ({ tasks, setTasks }) => {
  return (
    <View>
      <Text>Here is your list:</Text>
      {tasks.map((task) => (
        <Text>{task}</Text>
      ))}
    </View>
  );
};

export default TaskContainer;

React & Formik，在组件之间传递数据

React & Formik, Passing data between components

javascript

reactjs

react-native

formik

react-hooks