javascript - 如何在reactjs中制作点击按钮然后打开url

Question

我想做的是在我的代码中，当我点击按钮时，这个http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png url 是打开的。

我们怎么能做到这一点，但现在我已经使用 onclick on button 来实现不同的功能。但是我也想在我选择行并单击按钮时进行此操作，然后此 url 打开http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png。

我们如何对此提出任何想法和建议。请帮帮我。非常感谢。

我的代码https://codesandbox.io/s/o8tu5?file=/index.js:0-2259

class Test extends React.Component {
  constructor(props) {
    super();
    this.state = {
      data: [],
      checkbox: false
    };
  }

  handleClick = () => {
    const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
    if (this.state.checkbox) {
      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
          this.setState({ data: data });
          console.log("This is your data", data);
        });
    } else {
      alert("check the radio!");
    }
  };

  render() {
    return (
      <div>
        <div
          className="table-employee"
          style={{ marginTop: "20px", border: " 1.5px solid darkgray" }}
        >
          <table className="table table-hover table-bordered table-sm">
            <thead>
              <tr>
                <th scope="col">Select</th>
                <th scope="col"> LOAD DATE</th>
                <th scope="col"> FILE DATE</th>
                <th scope="col"> SERVICE</th>
                <th scope="col"> PROVISIONER CODE </th>
                <th scope="col"> DESCRIPTION</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <input
                    value={this.state.checbox}
                    onChange={(e) =>
                      this.setState({ checkbox: !this.state.checkbox })
                    }
                    type="radio"
                    preventDefault
                    name="select"
                  />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="btn-submit">
          <button
            className="btn btn-primary"
            style={{ marginRight: "30px" }}
            type="submit"
            onClick={this.handleClick}
          >
            submit
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

标签： javascriptreactjs