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

Question

React 新手，我的问题随之而来。

父组件有按钮和地图功能，它呈现了很多组件，这些组件是用户可以更改数据离开它的许多输入。

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>

      ))}
    </>
  )
}