如何在反应中停止刷新网页

Question

我没有维护由其他人编写的代码。

页面中有一个表格。 单击提交按钮后是否重新渲染页面？ 在我的 onSubmit 方法中，没有重新呈现网页的代码片段。 我想停止刷新页面，我也使用了 preventDefault 但它不起作用。

import React, { useState, useEffect } from "react";
import "./PartnerForm.css";

function PartnerForm() {
  const initialValues = {
    name: "",
    email: "",
    mobileno: "",
    b_state_id: "",
    b_City_name: "",
    patnerFormArea: "",
    amount: "",
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState({});
  const [isSubmit, setIsSubmit] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
    console.log(formValues);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setFormErrors(validate(formValues));
    setIsSubmit(true);
  };

  useEffect(() => {
    console.log(formErrors);
    if (Object.keys(formErrors).length === 0 && isSubmit) {
      console.log(formValues);
    }
  }, [formErrors]);

  const validate = (values) => {
    const errors = {};
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;

    if (!values.name) {
      errors.name = "Please enter your name.";
    }

    if (!values.email) {
      errors.email = "Please enter your Email.";
    }

    if (!values.mobileno) {
      errors.mobileno = "Please enter your mobile number.";
    }

    if (!values.b_state_id) {
      errors.b_state_id = "Please select one state.";
    }

    if (!values.b_City_name) {
      errors.b_City_name = "Please enter city name";
    }

    if (!values.patnerFormArea) {
      errors.patnerFormArea =
        "Please enter Available Floor Space (Owned/ Leased) (sq ft).";
    }

    if (!values.amount) {
      errors.amount = "Please enter Amount you can invest.";
    }
    return errors;
  };

  return (
    <div>
      <section className="pf-part">
        <div className="pf-boxx01">
          <h2 className="pf-h2-awards">FILL THE FORM</h2>
          <h3 className="pf-h3-awards">we will call you back</h3>
        </div>
        {/* <pre>{JSON.stringify(formValues, undefined, 2)}</pre> */}
        <form className="pf-boxx02" onSubmit={handleSubmit}>
          <div className="pf-bpart1">
            <input
              type="text"
              name="name"
              placeholder="Name"
              autoComplete="off"
              value={formValues.name}
              onChange={handleChange}
            />
            {formErrors.name && <p>{formErrors.name}</p>}
            <input
              type="text"
              name="email"
              placeholder="Email"
              autoComplete="off"
              value={formValues.email}
              onChange={handleChange}
            />
            <p>{formErrors.email}</p>
            <input
              type="tel"
              name="mobileno"
              placeholder="Mobile No."
              autoComplete="off"
              maxLength={10}
              value={formValues.mobileno}
              onChange={handleChange}
            />
            <p>{formErrors.mobileno}</p>
            <select name="b_state_id" onChange={handleChange}>
              <option selected="selected" value={formValues.b_state_id}>
                Select State
              </option>
              <option value="201">Assam</option>
              <option value="152">Bihar</option>
              <option value="336">Chhatisgarh</option>
              <option value="93">Delhi</option>
              <option value="85">Gujarat</option>
              <option value="10">Karnataka</option>
              <option value="164">Madhya Pradesh</option>
              <option value="16">Maharashtra</option>
              <option value="180">Meghalaya</option>
              <option value="198">Rajasthan</option>
              <option value="2">Tamil Nadu</option>
              <option value="431">Telangana</option>
              <option value="325">Tripura</option>
              <option value="101">Uttar Pradesh</option>
              <option value="229">Uttarakhand</option>
              <option value="77">West Bengal</option>
            </select>
            <p>{formErrors.b_state_id}</p>
            <select name="b_City_name" onChange={handleChange}>
              <option selected="selected" value={formValues.b_City_name}>
                Select City / locality
              </option>
            </select>
          </div>
          <p>{formErrors.b_City_name}</p>
          <div className="pf-bpart2">
            <textarea
              name="patnerFormArea"
              id="patnerFormArea"
              cols="40"
              rows="3"
              placeholder="Available Floor Space (Owned/ Leased) (sq ft)"
              maxLength={150}
              className="partner-textarea"
              autoComplete="off"
              value={formValues.patnerFormArea}
              onChange={handleChange}
            ></textarea>
            <p>{formErrors.patnerFormArea}</p>
            <input
              type="text"
              name="amount"
              placeholder="Amount you can Invest (in lakhs)"
              autoComplete="off"
              className="partner-input-part2"
              value={formValues.amount}
              onChange={handleChange}
            />
            <p>{formErrors.amount}</p>
            <span className="amount-span">
              The minimum investment amount required is Rs.30 lakhs
            </span>

            <textarea
              name="patnerFormCommnet"
              id="patnerFormComment"
              cols="40"
              rows="4"
              placeholder="Comments (Max. 500)"
              maxLength={500}
              className="partner-comment"
              autoComplete="off"
            ></textarea>
            <button
              disabled=""
              className="partner-black_btn btn"
              name="student_enquiry_form_submit"
              id="student_enquiry_form_submit"
              type="button"
            >
              Submit
            </button>
          </div>
        </form>
      </section>
    </div>
  );
}
export default PartnerForm;

Answer 1

更改要submit的按钮类型，您可以在handleSubmit上使用event.stopPropagation() 。