[英]how to fetch api data using react js
我想要做的是,當我點擊表格中的第一行復選框,然后點擊提交按鈕,然后 url 圖像未打開。
我想在單擊復選框然后單擊提交按鈕然后 url 圖像打開時進行。
我們怎么能做到這一點任何想法或幫助它非常感謝。
我的代碼https://codepen.io/svpan/pen/NWdJvmX?editors=1010
let ref = null;
class TableComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRow: ""
};
ref = this;
}
handleRowClick = async (rowID) => {
// make an API call here, sth like
console.log(rowID);
if (rowID) {
const url1 =
"https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?id=" + rowID;
// const url2 =
// "https://grandiose-mulberry-garnet.glitch.me/params/" + rowID;
// const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
// you can use any of the above API to test.
const response = await fetch(url1);
const res = await response.json();
// console.log(res)
this.setState({
...res
});
window.open(res.url, "_blank");
}
};
onSelectChange = (rowId) => {
this.setState({
selectedRow: rowId
});
};
render() {
var dataColumns = this.props.data.columns;
var dataRows = this.props.data.rows;
var tableHeaders = (
<thead>
<tr>
{" "}
{dataColumns.map(function (column) {
return <th> {column} </th>;
})}{" "}
</tr>{" "}
</thead>
);
var tableBody = dataRows.map((row) => {
return (
<tr key={row.id}>
{dataColumns.map(function (column) {
if (column == "Select")
return (
<td>
<input
type="checkbox"
checked={ref.state.selectedRow === row.id}
onChange={() => ref.onSelectChange(row.id)}
/>
</td>
);
else
return (
<td>
<a target="_blank" rel="noopener noreferrer" href={row.url}>
{row[column]}
</a>
</td>
);
})}
</tr>
);
});
// Decorate with Bootstrap CSS
return (
<div>
<table className="table table-bordered table-hover" width="100%">
{tableHeaders} {tableBody}
</table>
<input
type="submit"
value="submit"
onClick={() => this.handleRowClick(this.state.selectedRow)}
/>
</div>
);
}
}
// Example Data
var tableData = {
columns: ["Select", "Service_Name", "Cost/Unit"],
rows: [
{
Service_Name: "airplan",
"Cost/Unit": 50,
id: 1
},
{
Service_Name: "cat",
"Cost/Unit": 50,
id: 2
},
{
Service_Name: "fruits",
"Cost/Unit": 50,
id: 5
},
{
Service_Name: "pool",
"Cost/Unit": 50,
id: 4
}
]
};
ReactDOM.render(
<TableComponent data={tableData} />,
document.getElementById("table-component")
);
handleRowClick = async (rowID) => {
// make an API call here, sth like
console.log(rowID);
if (rowID) {
const url1 =
"https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?id=" + rowID;
// const url2 =
// "https://grandiose-mulberry-garnet.glitch.me/params/" + rowID;
// const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
// you can use any of the above API to test.
const response = await fetch(url1);
const res = await response.json();
// alert(res.url)
console.log(res)
console.log("row id " + rowID)
let object_ = {};
res.map(item=>{
// console.log(item.url)
if(item.id === rowID){
object_ = item;
}
})
this.setState({
...res
});
window.open(object_.url, "_blank");
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.