单击父组件从子组件获取数据

Question

React 新手，我的问题如下。

父组件有 Button 和 map 功能，它呈现了很多组件，这些组件是一些输入，用户可以在其中更改数据离开它。

import { Form } from 'formik';
import React from 'react';
import { useForm } from 'react-hook-form';

const Wrapper : React.FC = ( props: any) => {

  const { register, handleSubmit, errors } = useForm();
  const { formData, setValues } = useFormDataValues();
   
     return (
      <Form>
          <div>
            <button>
                Save Data
            </button> 
            { 
              props.cells.map( (cell: any,ind: number) => (

              <div key={ind} >
                  <Pattern props={{ "cell": cell }} />                              
              </div>

             }
             ))
          </div>             
    </Form>)

模式组件：

const Pattern = (props:  PatternProps) => {
  const { register, handleSubmit, errors } = useForm();
  const { formData, setValues } = useFormDataValues();

      return (
        <>
        {Object.keys(props).map( (c: string) => (
            <div >
            {
             <input name={c}  ref={register} defaultValue={props[c]} />
            }
            </div>

          ))}
          </>
          )

单击父组件按钮时，我应该从子组件（模式）获取所有输入数据（来自输入组件的数据）。我试过用react-hooks-forms和Formik来结合获取，但是无法获取。

Answer 1

没有理由 Pattern 使用 formik 钩子，您已经在 Wrapper 上使用了它。从 Pattern 中删除此钩子并作为道具从 Wrapper 传递下来。这样 Wrapper 将具有更集中的形式。

<Pattern data={{ "cell": cell }} // I suggest to rename here to something more semantic rather than 'props'
         formHandlers={{ register, handleSubmit, errors, formData, setValues }} 
         // pass down necessary handlers
         />

在模式：

// update PatternProps accordingly
const Pattern = (props:  PatternProps) => {
  const { formHandlers, data } = props

  return (
    <>
    {Object.keys(data).map( (c: string) => (
        <div key={c}> // pass a unique key here
          <input name={c}  ref={formHandlers.register} defaultValue={data[c]} />
        </div>

      ))}
    </>
  )
}

单击父组件从子组件获取数据

Get data from child component on click on parent component

reactjs

formik

react-hooks