react-hook-form - 无法将表单数据传递给父组件

Question

我正在使用 react-hook-form 并尝试将数据从表单传递到其父级。 为此，我试图通过回调传递数据，但它不起作用。 当我在父组件中 console.log data 时，我得到未定义。

父组件

import React from 'react';
import InputForm from './InputForm';

const App = (data) => {
  const onFormSubmit = () => {
    console.log(data.name);
  };

  return (
    <div className='App'>
       <InputForm onceSubmited={() => onFormSubmit()} />
    </div>
  );
};

export default App;

子组件

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

const InputForm = ({ onceSubmited }) => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    onceSubmited(data);
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type='text'
            name='name'
            ref={register}
          />

          <input
            type='email'
            name='email'
            ref={register}
          />
          
        <button type='submit'>
          Submit
        </button>
      </Form>
    </>
  );
};

export default InputForm;

Answer 1

您需要在箭头函数中传递参数。这应该使它工作：

import React from 'react';
import InputForm from './InputForm';

const App = () => {
  const onFormSubmit = (data) => {
    console.log(data.name);
  };

  return (
    <div className='App'>
       <InputForm onceSubmited={(data) => onFormSubmit(data)} />
    </div>
  );
};

export default App;