在 React 中使用 formik 将数据从一个组件传递到另一个组件

Question

I've created a simple react component for a form with few input fields using formik. My form is rendered three times on my home page for three different type of users, but I only have one button that is outside the component and on click it should save the data inside the PersonalInformation component. This is how my code looks inside my App.js (ignore the users and data for now):

{users.map((data, i) => { return <PersonalInformation key={i} /> })}
<Button>Submit</Button> //this is the button that needs to save the data inside of PersonalInfo component od click

My question is how I can save the data inside the three forms on click on the button? In end-point on the back end I would like to get an array of three objects, each objects will contain info about each field in the form. I guess what I need is to pass data from PersonalInformation component to onClick() event in Button , but I am not sure how to do that with formik.

Answer 1

if you don't use any state management, context etc i think simplest way is you can pass reference to your save method upper.

import React, {useRef} from "react";
import PersonalInformation from "./PersonalInformation";
import "./styles.css";

export default function App() {
  const saveRef = useRef(null)
  return (
    <div className="App">
      <PersonalInformation passSave={(ref) => saveRef.current = ref}/>
      <button onClick={() => saveRef.current()}> save </button>
    </div>
  );
}

//---------------------------------------------------------

import React, { useCallback, useEffect, useRef } from "react";

const PersonalInformation = ({passSave}) => {
    const formInput = useRef(null);
    const save = useCallback(() => {
      console.log(formInput.current.value)
    }, [formInput])

    useEffect(()=>{
      passSave(save)
    }, [passSave, save])

    return (
      <input type="text" ref={formInput} />
    )
}

export default PersonalInformation;