javascript - 如何在reactjs中单击按钮打开网址
问题描述
在我的代码中,当我选择行并单击按钮然后此 url 打开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;
解决方案
openInNewTab
用调用URL
。它将URL
在新的浏览器选项卡中打开。如果您想在同一个选项卡中打开它,请删除“_blank”。
const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
if (newWindow) newWindow.opener = null
}
推荐阅读
- c++ - 两个有符号数之间的距离
- python - ValueError: view limit minimum -5.1000000000000005 小于 1 并且是无效的 Matplotlib 日期值
- c# - 在统一编辑器脚本中,当聚焦我的编辑器窗口时,如何使编辑器窗口不聚焦任何文本字段
- google-cloud-sql - 如何将谷歌云 sql 的 Postgres 数据库连接到 django 应用程序
- string - Lua 中的字符串操作
- python - splrep 只考虑高点?
- html - 如何为传入数据配置 HTML
- python - Python:使用 -nun 值绘制 loglog 时出错
- r - 如何使用“texir”和“dmr”参数?
- c - 条件说明