如何使用来自useEffect的事件调用函数答案

【问题标题】：How to call function with event from useEffect如何使用来自useEffect的事件调用函数
【发布时间】：2021-07-04 03:31:17
【问题描述】：

我有<form> 和handleSubmit。

如何从我的useEffect 中使用event 调用handleSubmit 函数？

useEffect(() => {
    if (searchFromUrl) {
      handleSubmit();
    }
  }, []);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
}

<form onSubmit={handleSubmit} className="flex relative search-form"></form>

这是我的错误

 const handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>
    Expected 1 arguments, but got 0.ts(2554)
    SearchBox.tsx(27, 31): An argument for 'e' was not provided.

【问题讨论】：

标签： reactjs typescript react-hooks use-effect

【解决方案1】：

useEffect(() => {
    if (searchFromUrl) {
      handleSubmit(e); // u need to provide 'e'
    }
}, []);

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
}

<form onSubmit={handleSubmit} className="flex relative search-form"></form>

【讨论】：

是的，伙计，这就是我不知道该怎么做：D
'e' 当你将handleSubmit 函数传递给表单的'onSubmit' 属性时会自动传递，这就是为什么你需要在handleSubmit 中提到'e' 作为函数参数@ 即@ 987654324@，无论何时何地你叫它

【解决方案2】：

您在没有e 事件变量的情况下调用handleSubmit();。

如果你真的想在useEffect 中调用它，那么将e 参数更改为可选：

const handleSubmit = async (e?: React.FormEvent<HTMLFormElement>) => {
  if (e) {
    e.preventDefault();
  }
  // do something
}

【讨论】：