通过输入字段onChange响应onChange提交表单

Question

我几乎没有使用TypeScript的经验，我正在尝试提交一个表单，不仅从submit按钮，而且从字段OnChange事件，以及与另一个已经正常工作的处理程序一起提交表单。

以下是我到目前为止所得到的总结：

进口反应从“反应”；

function App() {
    const onSomeOtherHandler = (event: ChangeEvent<HTMLInputElement>) => {
        // my logic
    };

    const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        // my logic
    };

    return(
        <form onSubmit={handleFormSubmit}>
            <input onChange={(e) => {
                    onSomeOtherHandler(e);
                    handleFormSubmit(e);
              }
            } />
            <button type=”submit”>
                Calculate
            </button>
        </form>
    );
}

export default App;

当我以我的方式设置handleFormSubmit(e)时，它会返回一个错误：

Argument of type 'ChangeEvent<HTMLInputElement>' is not assignable to parameter of type 'FormEvent<HTMLFormElement>'.
  Types of property 'currentTarget' are incompatible.
    Type 'EventTarget & HTMLInputElement' is not assignable to type 'EventTarget & HTMLFormElement'.
      Type 'EventTarget & HTMLInputElement' is missing the following properties from type 'HTMLFormElement': acceptCharset, action, elements, encoding, and 8 more.]

如何通过该字段onChange传递正确的表单事件？还是我应该用我不知道的其他方式去做呢？还是我应该触发提交按钮？

Answer 1

使用此类型，因为您有两种提交方式，输入并单击。

e: React.FormEvent)