Question

我正在尝试构建一个if(obj.myDate == DateTime.MinValue) { aCommand.Parameters.Add("dateParameter", SqlDbType.Date).Value = DBNull.Value; } else { aCommand.Parameters.Add("dateParameter", SqlDbType.Date).Value = obj.myDate ; }表单组件（在ReactJs目标TypeScript中编写），我将用于我的网络应用程序中的所有表单。为了在发布表单时处理错误，我需要在有任何错误的情况下检查错误。

这是我的ES6方法：

handleSubmit

我目前正在处理的操作是一个简单的POST操作（示例）：

private handleSubmit = (ev: React.FormEvent<HTMLFormElement>): void => {
    var theForm = ev.target as HTMLFormElement;

    const formData = new FormData(theForm);

    fetch(theForm.action, { method: theForm.method, body: formData })
        .then(response => {
            if (!response.ok)
                throw Error(response.statusText);

            return response;
        })
        .catch(reason => console.log(reason));
}

但是，在提交表单时，我总是以ASP.net标准错误页面结束。如何阻止此行为并停留在表单上显示一些错误的页面上，例如[HttpPost] [AllowAnonymous] public async Task<ActionResult> Login(RequestAccountLoginPost request) { throw new ApplicationException("The application crashed in a way nobody expected. Sorry about that..."); }帮助用户识别出错的地方？

稍后我想实现一些处理，以防服务器端验证失败（但客户端没有），所以我可以向用户显示：There was an internal server-error. Write an e-mail to help@me.please。因此，我确实需要保持同一页面。

我是使用fetch-api的新手。也许这不是最好的选择？

Answer 1

您需要阻止正常提交表单并处理JS中的所有内容，否则您的页面将默认将数据发布到您的服务器。

private handleSubmit = (ev: React.FormEvent<HTMLFormElement>): void => {
    var theForm = ev.target as HTMLFormElement;
    ev.preventDefault()
// ... your code

来自MDN：Event接口的preventDefault()方法告诉用户代理，如果事件没有得到明确处理，则默认为不应该像通常那样采取行动。

发布表单数据时的Fetch-api错误处理

1 个答案: