时间戳

首页 > 解决方案 > 如何使用react js在点击的基础上动态获取api数据

javascript - 如何使用react js在点击的基础上动态获取api数据

问题描述

在 react js 中，如何基于点击按钮动态获取 api 数据。在我下面的代码中，我想使用 react js 在点击的基础上获取数据。我们如何做到这一点。

https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d我的api是this。在我下面的代码中，我制作了一个表格，当我点击第一行是飞机时，我想要点击第一行然后使用此 api https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d获取飞机数据。

我们怎么能做到这一点。

有什么帮助吗。非常感谢。

var TableComponent = React.createClass({
  render: function() {
    // Data
    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(function(row) {
      return (
        <tr>
          {dataColumns.map(function(column) {
            return <td>{row[column]}</td>; })}
        </tr>); });
    // Decorate with Bootstrap CSS
    return (<table className="table table-bordered table-hover" width="100%">
        {tableHeaders}
        {tableBody}
      </table>) }});
        

// Example Data
var tableData = {
 columns: ['Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplane',
    'Cost/Unit': 50
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50
  }]
};

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component'));

标签： javascriptreactjs

解决方案

可能你需要这样的东西。实施步骤：

  1. 在您的行上添加一个点击监听器
  2. 实现类似于以下实现的 handleRowClick 函数。将响应中所需的所有内容保存到 React 状态。
  3. 在 UI 中的某处显示结果，或者只是 console.log 它。

下面是一些可能对您有帮助的代码

class TableComponent extends React.Component {
  state = {};

  handleRowClick = async () => {
    // make an API call here, sth like
    const url = "https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d";
    const response = await fetch(url);
    this.setState({
      ...response,
    });
  };

  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 onClick={this.handleRowClick}>
          {" "}
          {dataColumns.map(function (column) {
            return (
              <td>
                {" "}
                <a target="_blank" rel="noopener noreferrer" href={row.url}>
                  {" "}
                  {row[column]}{" "}
                </a>
              </td>
            );
          })}{" "}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      <table className="table table-bordered table-hover" width="100%">
        {" "}
        {tableHeaders} {tableBody}{" "}
      </table>
    );
  }
}

// Example Data
var tableData = {
  columns: ["Service_Name", "Cost/Unit", "Unit", "Units Requested"],
  rows: [
    {
      Service_Name: "airplane",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
      url:
        "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blue.png",
    },
    {
      Service_Name: "cat",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
      url:
        "http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_background.png",
    },
    {
      Service_Name: "fruits",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
      url:
        "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blend.png",
    },
    {
      Service_Name: "pool",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
    },
  ],
};

ReactDOM.render(
  <TableComponent data={tableData} />,
  document.getElementById("table-component")
);

推荐阅读