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

问题描述

我已经使用react钩子实现了一个受控表格。 我还添加了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;

解决方法

经过更多调试后，我发现由于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,

,

当我使用 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>
    </>
  );
};