Предотвратить переход реакции маршрутизатора без запроса

Question

Я бы хотел предотвратить переход реагирующего маршрутизатора из формы, если он недействителен. Использование a подсказки для этого неудовлетворительно, поскольку я хочу полностью запретить пользователю переходить на новый маршрут до тех пор, пока форма не будет действительной (тогда как подсказка, кажется, всегда предоставляет пользователювозможность продолжить), и я хотел бы отобразить сообщение об ошибке на моей странице вместо навязчивого приглашения.

Как я могу предотвратить этот переход без приглашения?

Моя форма:

    <form>
      <div>
        <label>Name: </label>
        <input
          type="text"
          name="name"
          id="name"
          onChange={this.handleChange}
          autoComplete="name"
        />
      </div>
      <div>
        <label>Email: </label>
        <input
          type="text"
          name="email"
          id="email"
          onChange={this.handleChange}
          autoComplete="email"
        />
      </div>
      <div>
        <label>Password: </label>
        <input
          type="password"
          name="password"
          id="password"
          onChange={this.handleChange}
          autoComplete="new-password"
        />
      </div>
      <br />
      <div>

        <!-- HERE IS THE LINK I WANT TO DISABLE IN CASE OF INVALID FORM -->

        <Link when={this.state.formIsValid} to="/F2">
          <button
            onClick={() => {
              if (this.formIsValid()) {
                this.props.updatePurchaseRecord({
                  name: this.state.name,
                  email: this.state.email,
                  password: this.state.password,
                  purchase_id: this.props.purchase_id
                });
              }
            }}
          >
            Next
          </button>
        </Link>
      </div>
    </form> 

Моя функция formIsValid, которая запускается при нажатии кнопки «Далее»:

  formIsValid() {
    let isValid = true;
    let formErrors = { name: "", email: "", password: "" };
    // validate name
    if (this.state.name === "") {
      isValid = false;
      formErrors.name = "Name is required";
    }

    // validate email
    if (this.state.email === "") {
      isValid = false;
      formErrors.email = "Email is required";
    }

    // validate password
    if (this.state.password === "") {
      isValid = false;
      formErrors.password = "Password is required";
    }
    this.setState({ formErrors });
    return isValid;
  }

Answer 1

Почему бы просто не отобразить отключенную версию кнопки, если форма недействительна?Например:

formIsValid ? <RealButton /> : <DisabledButton />