Question

我正在使用React Router并尝试在选择＆＃34; No＆＃34;的单选按钮上导航到另一个页面。如果可以实现，请告诉我。

Answer 1

您可以使用history.push或history.replace以编程方式更改路径 - 完整文档https://reacttraining.com/react-router/web/api/history。如果您想导航到另一个页面，可以使用window.location.href执行此操作 - 请参阅问题：What's the difference between window.location= and window.location.replace()? - 因为重定向（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>
    );
  }
}

或者您可以为单选按钮“No”添加不同的onChange处理程序，以避免检查是否触发了“Radio”按钮。

<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 希望这有帮助！

React Router在单选按钮选择中导航到另一个页面

1 个答案: