event.preventDefault() 不适用于 Reactjs

Question

当我尝试提交使用 fetch 执行请求的表单时，我的 react 应用程序出现问题，该请求运行良好，但问题是页面总是在之后刷新。我找不到发生这种情况的原因，因为我在另一个页面上有另一个表单可以正常工作。

函数提交表单：

      submitForm(e) {
    e.preventDefault();
    let {
      email,
      password,
      nombre,
      imagen,
      imagenArchivo,
      url,
      descripcion,
      descripcionBreve,
      estado,
    } = this.state;
    var myHeaders = new Headers();
    myHeaders.append("Authorization", localStorage.getItem("token"));

    var formdata = new FormData();
    formdata.append("nombreONG", nombre);
    formdata.append("urlONG", url);
    formdata.append("descripcionBreveONG", descripcionBreve);
    formdata.append("descripcionONG", descripcion);
    formdata.append("idiomaONG", "1");
    formdata.append("emailONG", email);
    formdata.append("passONG", password);
    formdata.append("imgONG", imagenArchivo, imagen);
    formdata.append("estadoONG", estado);

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: formdata,
      redirect: "follow",
    };
    fetch(Constantes.urlSPRING + "/v1/ONG/intranet/editar", requestOptions)
      .then((response) => response.json())
      .then((response) => this.setState({ response: response }))
      .catch((error) =>
        console.log(
          error +
            "Ha ocurrido un error con la petición de de registro, intenteteló más tarde o contacte con el administrador."
        )
      );
    alert("gkjghjgjhgjgjhkghjgjh");
  }

形式（片段）：

        <form className="" onSubmit={this.submitForm}>
          <div className="row fila-form">
            <div className="col-md-6 text-left">
              <label> Nombre:</label>
              <input
                type="text"
                id="inputNombre"
                name="nombre"
                value={nombre}
                onChange={this.onChange}
                className="form-control"
                placeholder="Nombre de la ONG"
                required
                autoFocus
              ></input>
            </div>
            <div className="col-md-6 text-left">
              <label> Email:</label>
              <input
                type="text"
                id="inputEmail"
                name="email"
                value={email}
                onChange={this.onChange}
                className="form-control"
                placeholder="Email"
                required
                autoFocus
              ></input>
            </div>
          </div>
          <div className="row fila-form">
            <div className="col-md-6 text-left">
              <label> Contraseña:</label>
              <input
                type="password"
                id="inputPassword"
                name="password"
                onChange={this.onChange}
                onKeyUp={this.contraseñas}
                title="La contraseña debe de tener una longitud de al menos 8 cáractares y de contener al menos una letra minúscula, una letra mayúscula y un número."
                className="form-control"
                placeholder="Contraseña"
                value={password}
                required
              ></input>
            </div>
            <div className="col-md-6 text-left">
              <label> Repita la contraseña:</label>
              <input
                type="password"
                id="inputPassword2"
                name="password2"
                onChange={this.onChange}
                onKeyUp={this.contraseñas}
                className="form-control"
                placeholder="Confirme Contraseña"
                value={password2}
                required
              ></input>
            </div>
            <p id="errContraseña">{errContraseñas}</p>
          </div>
          <div className="row fila-form">
            <div className="col-md-6 text-left">
              <label> Imagen:</label>
              <input
                type="file"
                name="imagen"
                onChange={this.onChange}
                className="form-control"
                placeholder="Imagen"
                value={imagen}
                accept="image/x-png,image/gif,image/jpeg"
                required
              ></input>
            </div>
            <div className="col-md-6 text-left">
              <label> Url de la ONG:</label>
              <input
                type="url"
                name="url"
                onChange={this.onChange}
                className="form-control"
                placeholder="Url de la ONG"
                value={url}
                required
              ></input>
            </div>
          </div>
          <div className="row fila-form">
            <div className="col-md-8 descripcionBreve text-left">
              <label> Descripción breve:</label>
              <textarea
                type="text"
                name="descripcionBreve"
                maxLength="320"
                onChange={this.onChange}
                className="form-control"
                placeholder="Descripción breve de la ONG"
                value={descripcionBreve}
                required
              ></textarea>
            </div>
            <div className="col-md-10 descripcion text-left">
              <label> Descripción:</label>
              <textarea
                type="text"
                name="descripcion"
                onChange={this.onChange}
                className="form-control"
                placeholder="Descripción de la ONG"
                value={descripcion}
                required
              ></textarea>
            </div>
          </div>
          {errContraseñas === "" ? (
            <button
              className="btn btn-lg btn-primary btn-block"
              type="submit"
            >
              Editar ONG
            </button>
          ) : (
            <button
              className="btn btn-lg btn-primary btn-block"
              type="submit"
              disabled
            >
              Editar ONG
            </button>
          )}
        </form>

Answer 1

我建议您尝试将 e.preventDefault() 放在代码末尾，这样它会替换函数 return（值为 false），因为您不会从表单中返回任何内容。