时间戳

首页 > 解决方案 > 无法让 e.preventDefault 与 React Typescript 一起使用

javascript - 无法让 e.preventDefault 与 React Typescript 一起使用

问题描述

我有一个看起来像这样的组件：

const App = (): ReactElement => {
    
    const submitFeedbackHandler = (e: FormEvent): void => {
        e.preventDefault();
        // ...
    }

    return <>
        <form onSubmit={submitFeedbackHandler}>
            // ...
            <button type='submit'>Submit</button>
        </form>
    </>

}

问题是，无论我如何尝试调用它submitFeedbackHandler都onSubmit不起作用。我试过onSubmit={(e) => submitFeedbackHandler(e)}了，但也没有运气。我怎样才能让它工作，以便我能做到e.preventDefault()？

标签： javascriptreactjstypescript

解决方案

这可能会让像我这样没有经验的 React 开发人员有些头疼，所以这里是问题的答案：

我已将required标签添加到表单中的某些输入中。奇怪的是，这onSubmit完全停止被调用。即使只是简单地调用onSubmit = {() => console.log('onSubmit!')}也不起作用，所以我从表单中的输入中删除了所有必需的标签，现在它工作正常。在这种情况下，我将自己验证空字段，而不是依赖于输入所需的标签。

我认为这与 React 中受控和不受控的组件有关。将做进一步的研究，看看究竟是什么原因造成的。感谢@Julius Guevarra 的帮助。

推荐阅读