表单在使用Reactjs时无法正确提交。

huangapple
go评论91阅读模式
英文:

Form not submitting properly using Reactjs

问题

我正在使用Reacjs/nextjs，目前我正在尝试提交"登录表单"，我能够弹出警告，但页面也重新加载了，我只想要页面不重新加载，我错在哪里？以下是我的当前代码在 "index.tsx" 文件中：

  1. import React from 'react';
  2. import axios from 'axios';
  4. const LoginForm = () => {
  5.   
  6.   const [formValue, setformValue] = React.useState({
  7.     email: '',
  8.     password: ''
  9.   });
  11.   const handleSubmit = (event) => {
  12.     alert("它正在工作");
  13.     // 我们将在下一段中填充这部分
  14.   }
  16.   const handleChange = (event) => {
  17.     setformValue({
  18.       ...formValue,
  19.       [event.target.name]: event.target.value
  20.     });
  21.   }
  23.   return (
  24.     <form onSubmit={handleSubmit}>
  25.       <p>登录表单</p>
  26.       <input
  27.         type="email"
  28.         name="email"
  29.         placeholder="输入电子邮件"
  30.         value={formValue.email}
  31.         onChange={handleChange}
  32.       />
  33.       <input
  34.         type="password"
  35.         name="password"
  36.         placeholder="输入密码"
  37.         value={formValue.password}
  38.         onChange={handleChange}
  39.       />
  40.       <button
  41.         type="submit"
  42.       >
  43.         登录
  44.       </button>
  45.     </form>
  46.   )
  47. };
  49. export default LoginForm;

希望这有帮助。

英文:

I am working with Reacjs/nextjs,Right now i am trying to submit "login form" i am getting alert but page is also reloading,I just want page should not reload,Where i am wrong ? Here is my current code in "index.tsx"

  1. import React from &#39;react&#39;;
  2. import axios from &#39;axios&#39;;
  4. const LoginForm = () =&gt; {
  5.   
  6.   const [formValue, setformValue] = React.useState({
  7.     email: &#39;&#39;,
  8.     password: &#39;&#39;
  9.   });
  11.   const handleSubmit = (event) =&gt; {
  12.     alert(&quot;its workinggg&quot;);
  13.     // we will fill this in the coming paragraph
  14.   }
  16.   const handleChange = (event) =&gt; {
  17.     setformValue({
  18.       ...formValue,
  19.       [event.target.name]: event.target.value
  20.     });
  21.   }
  23.   return (
  24.     &lt;form onSubmit={handleSubmit}&gt;
  25.       &lt;p&gt;Login Form&lt;/p&gt;
  26.       &lt;input
  27.         type=&quot;email&quot;
  28.         name=&quot;email&quot;
  29.         placeholder=&quot;enter an email&quot;
  30.         value={formValue.email}
  31.         onChange={handleChange}
  32.       /&gt;
  33.       &lt;input
  34.         type=&quot;password&quot;
  35.         name=&quot;password&quot;
  36.         placeholder=&quot;enter a password&quot;
  37.         value={formValue.password}
  38.         onChange={handleChange}
  39.       /&gt;
  40.       &lt;button
  41.         type=&quot;submit&quot;
  42.       &gt;
  43.         Login
  44.       &lt;/button&gt;
  45.     &lt;/form&gt;
  46.   )
  47. };
  49. export default LoginForm;

答案1

得分: 1

使用 preventDefault 方法来阻止默认重新加载。

它适用于所有具有默认操作的事件。

  1. const LoginForm = () => {
  2.   
  3.   const [formValue, setformValue] = React.useState({
  4.     email: '',
  5.     password: ''
  6.   });
  8.   const handleSubmit = (event) => {
  10.     event.preventDefault() // <----- 在这里
  12.     alert("它正在工作");
  13.     // 我们将在接下来的段落中填写这部分内容
  14.   }
  16.   const handleChange = (event) => {
  17.     setformValue({
  18.       ...formValue,
  19.       [event.target.name]: event.target.value
  20.     });
  21.   }
  23.   return (
  24.     <form onSubmit={handleSubmit}>
  25.       <p>登录表单</p>
  26.       <input
  27.         type="email"
  28.         name="email"
  29.         placeholder="输入电子邮件"
  30.         value={formValue.email}
  31.         onChange={handleChange}
  32.       />
  33.       <input
  34.         type="password"
  35.         name="password"
  36.         placeholder="输入密码"
  37.         value={formValue.password}
  38.         onChange={handleChange}
  39.       />
  40.       <button
  41.         type="submit"
  42.       >
  43.         登录
  44.       </button>
  45.     </form>
  46.   )
  47. };
英文:

Use preventDefault method to prevent default reload.

It works with all events which have default action.

  1. const LoginForm = () =&gt; {
  2.   
  3.   const [formValue, setformValue] = React.useState({
  4.     email: &#39;&#39;,
  5.     password: &#39;&#39;
  6.   });
  8.   const handleSubmit = (event) =&gt; {
  10.     event.preventDefault() // &lt;----- HERE
  12.     alert(&quot;its workinggg&quot;);
  13.     // we will fill this in the coming paragraph
  14.   }
  16.   const handleChange = (event) =&gt; {
  17.     setformValue({
  18.       ...formValue,
  19.       [event.target.name]: event.target.value
  20.     });
  21.   }
  23.   return (
  24.     &lt;form onSubmit={handleSubmit}&gt;
  25.       &lt;p&gt;Login Form&lt;/p&gt;
  26.       &lt;input
  27.         type=&quot;email&quot;
  28.         name=&quot;email&quot;
  29.         placeholder=&quot;enter an email&quot;
  30.         value={formValue.email}
  31.         onChange={handleChange}
  32.       /&gt;
  33.       &lt;input
  34.         type=&quot;password&quot;
  35.         name=&quot;password&quot;
  36.         placeholder=&quot;enter a password&quot;
  37.         value={formValue.password}
  38.         onChange={handleChange}
  39.       /&gt;
  40.       &lt;button
  41.         type=&quot;submit&quot;
  42.       &gt;
  43.         Login
  44.       &lt;/button&gt;
  45.     &lt;/form&gt;
  46.   )
  47. };

huangapple
  • 本文由 发表于 2023年2月16日 02:04:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/75463805.html
  • javascript
  • next.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定