React Hook Form 如何在子组件中调用 onSubmit？

Question

我正在使用 React Hook Form。我有一个使用 FormProvider 并管理表单提交的高阶组件。我想从子组件触发此功能。我遇到的问题是，当我调用子组件中的函数时，onSubmit 函数 returns 中的数据未定义。但是，当我在同一组件中单击提交时，它会按预期工作。我做错了什么？

const FormGroup = () {
  const onSubmit: SubmitHandler<Inputs> = data => {
    console.log('data', data);
      dispatch(setEntityInformation({
        data
      }));
    }
  };

  <FormProvider {...methods}>
    <form onSubmit={methods.handleSubmit(onSubmit)}>
      <section className="sars__sideBar">
        <TabBar
          controls={TAB_CONTROLS.controls}
          activeIndex={index}
          setActiveTab={i => setActiveTab(i)}
          onSubmit={onSubmit}
        />
      </section>
      
      <PrimaryButton onClick={() => {
         setActiveTab(index + 1);
      }}
      >
        <input type="submit" value="Continue" /> // submits form as expected
      </PrimaryButton>  
    
    </form>
  </FormProvider>
}

// 子组件

const TabBar = ({ activeIndex, setActiveTab, controls, onSubmit }) => (
  <Tabs>
    {controls.map((control, i) => (
      <div
        className={`tab__wrapper ${i === activeIndex ? 'active' : ''}`}
        key={control.key}
        onClick={() => {
          setActiveTab(i);
          if (i > activeIndex) {
            onSubmit(); // function is called, but data is undefined
          }
        }}
      >
        <div className="u-alignCenter">
          <p>{control.label}</p>
        </div>
        <div className="tab__status" />
      </div>
    ))}
  </Tabs>
);

Answer 1

也许通过 handleSubmit 呼叫 onSubmit() 会有帮助？像这样：handleSubmit(onSubmit)();

您需要这个，因为 handleSubmit 是运行异步的，并且您实际上使用第二个括号调用返回的函数。

您可以阅读更多相关信息here

React Hook Form 如何在子组件中调用 onSubmit？

React Hook Form how can I call onSubmit in a child component?

reactjs

react-hook-form