如何在reactjs中单击按钮时打开网址

Question

在我的代码中，当我选择行并单击按钮然后此网址打开 http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png 时，我正在尝试执行此操作。

但是现在在我的代码中，当我选择行并单击按钮时，url 没有打开。

当我选择行并单击打开 URL http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png 的按钮时，我们如何才能打开此 URL。

我的代码在这里https://codesandbox.io/embed/react-example-forked-o8tu5?codemirror=1

请任何人提出任何想法并帮助我。我坚持这一点。

   import React from 'react';
import axios from 'axios';
class ProvFileRptSearchResult extends React.Component {
    constructor(props) {
        super();
      
        this.state = {
            pymtDetails:[],
            data: [],
            rowDetails:[],
            checkbox: false
            
           };
        //    this.handleFile=this.handleFile.bind(this);
             this.handleClick=this.handleClick.bind(this);
       
    }

    handleClick() {
        const apiUrl = "http://localhost:9090/PrvFileRpt/getPrvFileData";
        if (this.state.checkbox) {
          fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => {
              this.setState({ data: data });
              console.log("This is your data", data);
              window.open("https://example.com", "_blank");
            })
        } else {
          alert("Data not fetched!");
        }
        // console.log('click');
      }

    // handleClick(e) {
    //     e.preventDefault();
    //     console.log("The link was clicked");
    //   }

    // handleFile()
    // {
    //     //fetch birt report from here
    //     console.log("inside file  ",this.state.rowDetails);
    // }
    rowSelected(j) {
  
       // e.preventDefault();
       
        console.log(j)
       
        const rownum=j;
         console.log("rownum=",rownum)
   
         console.log(this.props.customerDetails[rownum] )
        this.setState({rowDetails:this.props.customerDetails[rownum]}, () => {
        
        
    });
    }
   
    
    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>
                     {
                     this.props.customerDetails.map((type,j)=>{
                        return(
 
                        <tr> 
                        <td ><input type="radio" preventDefault name="select"  key={j}  onClick={(e) =>this.rowSelected(j)} value={this.state.checkbox}
                    onChange={(e) =>
                      this.setState({ checkbox: !this.state.checkbox })
                    }/></td>
                         <td> {type.provis_file_stamp}</td>
                          <td> {type.provis_file_hdrdt}</td>
                          <td> {type.service_code}</td>
                            <td>{type.provisioner_code}</td>
                            <td>{type.provisioner_desc}</td>   
                            
                            </tr>
                        )
                     })
                         
                }

            </tbody>
            </table>
            </div>
            <div className="btn-submit" >
                            <button className="btn btn-primary" style={{marginRight:"30px"}}  type="submit" onClick={this.handleClick}>FILE</button>
                               
                        </div>
            
    </div>
        )
    }
}
    
export default ProvFileRptSearchResult;

Answer 1

使用URL 致电openInNewTab。它将在新的浏览器选项卡中打开URL。如果您想在同一选项卡中打开它，请删除“_blank”。

const openInNewTab = (url) => {
    const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
    if (newWindow) newWindow.opener = null
}

Answer 2

好吧，如果我理解正确，您是在尝试在单击按钮时打开 URL？

如果正确，在您的点击处理程序中使用 window.open('https://example.com', '_blank') 将允许您在新标签页中打开任何 URL。

Answer 3

首先你需要使用find方法找到正确的对象，然后你可以使用window.open打开url

试试下面的代码：-

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 });
          const urlData = data.find(element => element.id === 3); // filter data with id
          window.open(urlData.url, '_blank'); // open url here
        });
    } else {
      alert("check the radio!");
    }
  };