页面在表单提交时重新加载。为什么？

Question

我已经使用反应钩子实现了一个受控表单。 我还向表单提交处理程序添加了 event.preventDefault() 调用。 但出于某种原因，即使这样，表单提交也总是会导致页面刷新。 我不知道为什么。

我已经检查了 StackOverflow 中的其他线程并检查了答案，我所做的是正确的。 我只是不能

下面是我的代码..我做错了什么？

 import React,{useState} from 'react'; import style from './style.css' import {Link,useParams} from 'react-router-dom' import {useDispatch,useSelector} from 'react-redux' import {builderUpdateRequest,selectBuilders} from "../../data/builder" const PageBuilderForm=()=>{ let { id } = useParams(); const allBuilders=useSelector(selectBuilders) const selectedBuilder=allBuilders?allBuilders.find(x=>x.id==id):null; const [formData,setFormData]=useState(selectedBuilder) const dispatch=useDispatch(); const onSubmitHandler=(e)=>{ e.preventDefault(); dispatch(builderUpdateRequest(formData)); } const handleChange=(e)=>{ const newFormData={ ...formData}; newFormData[e.currentTarget.name]=e.currentTarget.value; setFormData({ ...newFormData, }) } if(selectedBuilder){ return( <div className={style.formContainer}> <form className={style.form} onSubmit={onSubmitHandler}> <div className={style.formLabel}>Developer Logo Image URL</div> <div className={style.formField}><input type="url" name="logo" value={formData.logo} onChange={handleChange} required/></div> <div className={style.formLabel}>Developer Name</div> <div className={style.formField}><input type="text" name="title" value={formData.title} onChange={handleChange} required/></div> <div className={style.formLabel}>Years of Experience</div> <div className={style.formField}><input type="number" name="totalExp" value={formData.totalExp} onChange={handleChange} required/></div> <div className={style.formLabel}>Projects Count</div> <div className={style.formField}><input type="number" name="totalProjects" value={formData.totalProjects} onChange={handleChange} required/></div> <div className={style.formLabel}>Description</div> <div className={style.formField}><input type="text" name="desc" value={formData.desc} onChange={handleChange} required maxlength={200}/></div> <div className={style.formLabel}>Project Name</div> <div className={style.formField}><input type="text" name="imgTitle" value={formData.imgTitle} onChange={handleChange} required maxlength={40}/></div> <div className={style.formLabel}>Project Location</div> <div className={style.formField}><input type="text" name="location" value={formData.location} onChange={handleChange} required maxlength={40}/></div> <div className={style.formLabel}>Project image URL</div> <div className={style.formField}><input type="url" name="imgURL" value={formData.imgURL} onChange={handleChange} required/></div> <div className={style.formField}> <input type="submit" value="Update"/> </div> </form> <Link className={style.home}to="/">Go Home</Link> </div> ) } else{ return <Link className={style.home}to="/">Go Home</Link> } } export default PageBuilderForm;

Answer 1

调试更多后，我发现由于 webpack 热重载功能而发生重载。一旦我在 webpack 开发服务器中禁用了热重载，我的页面在表单提交时停止刷新。 关于为什么在开发服务器中发生这种情况非常奇怪和令人惊讶。我现在很好奇为什么开发服务器在调用 api 以更新表单中输入的数据后执行热重载。

我在 webpackDevServer.config.js 中修改了这些设置

 watchContentBase: false, // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint // for the WebpackDevServer client so it can learn when the files were // updated. The WebpackDevServer client is included as an entry point // in the webpack development configuration. Note that only changes // to CSS are currently hot reloaded. JS changes will refresh the browser. hot: false,

Answer 2

当我使用 onSubmit 作为防止其工作时：

const Submit = (e) => {
    e.preventDefault();
    alert("Information Is Received");
  };

  return (
    <>
      <form onSubmit={Submit}>
        <div className="Dcontainer">
          <h1 className="heading">Hello, {inputValue.uName}</h1>
          <p>{inputValue.email}</p>
          <p>{inputValue.password}</p>
          <input
            type="text"
            placeholder="Enter Your Name"
            name="uName"
            // value ={inputValue.uName}
            onChange={inputEvent}
          />
          <input
            type="email"
            placeholder="Enter Your Email"
            name="email"
            // value={inputValue.email}
            onChange={inputEvent}
          />
          <input
            type="password"
            placeholder="Enter Your Password"
            name="password"
            // value={inputValue.password}
            onChange={inputEvent}
          />
          <button className="primary__btn" type="submit">
            Submit
          </button>
        </div>
      </form>
    </>
  );
};