React Router перейдите на другую страницу выбора радиокнопок

Question

Я использую React Router и пытаюсь перейти на другую страницу, выбрав переключатель «Нет».Пожалуйста, дайте мне знать, если это возможно.

Answer 1

Вы можете изменить маршрут программно с помощью history.push или history.replace - полная документация https://reacttraining.com/react-router/web/api/history. Если вы хотите перейти на другую страницу , вы можете сделать этос window.location.href - см. вопрос: В чем разница между window.location = и window.location.replace ()? - так как Redirect (https://reacttraining.com/react-router/web/api/Redirect) не может помочь в вашем случае. НеУбедитесь, какая навигация вам нужна (другой маршрут или страница), но вы можете обработать ее в обработчике события onChange на своей радиокнопке.

import React, { Component } from "react";

export default class RadioButtons extends Component {
  state = { selectedOption: "" };

  handleOptionChange = e => {
    if (e.target.checked && e.target.value === "no") { // if value of "No" option is selected
      this.props.history.push("newRoute"); // navigate to another route
      //window.location.href = "https://www.google.com"; - if you want to navigate to another page
    }
    this.setState({ selectedOption: e.target.value });
  };

  render() {
    const { selectedOption } = this.state;
    const { history } = this.props;

    return (
      <div>
        <div className="radio">
          <label>
            <input
              type="radio"
              checked={selectedOption === "yes"}
              onChange={this.handleOptionChange}
            />
            Yes
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="no"
              checked={selectedOption === "no"}
              onChange={this.handleOptionChange}
            />
            No
          </label>
        </div>
      </div>
    );
  }
}

Или вы можете просто установить другой обработчик onChange для радиокнопки «Нет»., чтобы избежать проверки, сработала кнопка «Радио» или нет.

<div className="radio">
  <label>
    <input type="radio" value="no"
       checked={selectedOption === "no"}
       onChange={e => this.props.history.push('newRoute') || window.location.href= "https://www.google.com" }
     />
     No
   </label>
 </div>
</div>

Полный код можно посмотреть здесь: https://codesandbox.io/s/m3omno7olx Надеюсь, это поможет!