Fatal编程技术网
  • javascript/
  • Javascript 如何使用react js在click的基础上动态获取api数据

Javascript 如何使用react js在click的基础上动态获取api数据

javascript reactjs

Javascript 如何使用react js在click的基础上动态获取api数据,javascript,reactjs,Javascript,Reactjs,在react js中，如何在单击按钮的基础上动态获取api数据。在我下面的代码中，我想使用react js在单击的基础上获取数据。我们如何才能做到这一点 我的api是这样的。在我下面的代码中，我制作了一个表，当我单击第一行即飞机时，我想要，当我单击第一行时，然后使用此api获取飞机数据 我们怎么能做到呢 有什么帮助吗？非常感谢 var TableComponent = React.createClass({ render: function() { // Data var d

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

我的api是这样的。在我下面的代码中，我制作了一个表，当我单击第一行即飞机时，我想要，当我单击第一行时，然后使用此api获取飞机数据

我们怎么能做到呢

有什么帮助吗？非常感谢

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'));

var TableComponent=React.createClass({
render:function（）{
//资料
var dataColumns=this.props.data.columns；
var dataRows=this.props.data.rows；
var tableHeaders=(
{dataColumns.map（函数（列）{
返回{column}；}）}
);
var tableBody=dataRows.map（函数（行）{
返回(
{dataColumns.map（函数（列）{
返回{行[列]}；}}}
); });
//用引导CSS装饰
返回(
{tableHeaders}
{表体}
) }});
//示例数据
var表格数据={
列：[“服务名称”、“成本/单位”]，
行：[{
“服务名称”：“飞机”，
“成本/单位”：50
}, {
“服务名称”：“类别”，
“成本/单位”：50
},{
“服务名称”：“水果”，
“成本/单位”：50
}, {
“服务名称”：“池”，
“成本/单位”：50
}]
};
ReactDOM.render(
,
document.getElementById（'table-component'）；
我希望这将有助于：

const MyTable = ({data}) => {
  const fetchSomething = serviceName => fetch(`https://whatever?service_name=${serviceName}`).then(...);

  return (
    <Table>
      <tr>
        {data.columns.map(column => (<th key={column}>{column}</th>))}
      </tr>
      {data.rows.map((row, index) => (
        <tr key={index} onClick={fetchSomething(row['Service_Name'])}>
          <td>{row['Service_Name']}</td>
          <td>{row['Cost/Unit']}</td>
        </tr>
      ))}
    </Table>
    )
}

constmytable=（{data}）=>{
const fetchSomething=serviceName=>fetch(`https://whatever?service_name=${serviceName}`）。然后（…）；
返回(
{data.columns.map（column=>（{column}））}
{data.rows.map（（行，索引）=>(
{行['Service_Name']}
{行['成本/单位']}
))}
)
}
我希望这将有助于：

const MyTable = ({data}) => {
  const fetchSomething = serviceName => fetch(`https://whatever?service_name=${serviceName}`).then(...);

  return (
    <Table>
      <tr>
        {data.columns.map(column => (<th key={column}>{column}</th>))}
      </tr>
      {data.rows.map((row, index) => (
        <tr key={index} onClick={fetchSomething(row['Service_Name'])}>
          <td>{row['Service_Name']}</td>
          <td>{row['Cost/Unit']}</td>
        </tr>
      ))}
    </Table>
    )
}

constmytable=（{data}）=>{
const fetchSomething=serviceName=>fetch(`https://whatever?service_name=${serviceName}`）。然后（…）；
返回(
{data.columns.map（column=>（{column}））}
{data.rows.map（（行，索引）=>(
{行['Service_Name']}
{行['成本/单位']}
))}
)
}
也许你需要这样的东西。实施步骤：

  • 在您的行上添加一个单击侦听器
  • 实现handleRowClick功能，类似于下面的实现。将响应中需要的所有内容保存到React状态
  • 在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")
);

    类TableComponent扩展了React.Component{
状态={}；
handleRowClick=async（）=>{
//在这里进行API调用，比如
常量url=”https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d";
const response=等待获取（url）；
这是我的国家({
…回应，
});
};
render（）{
var dataColumns=this.props.data.columns；
var dataRows=this.props.data.rows；
var tableHeaders=(
{" "}
{dataColumns.map（函数（列）{
返回{column}；
})}{" "}
{" "}
);
var tableBody=dataRows.map（（行）=>{
返回(
{" "}
{dataColumns.map（函数（列）{
返回(
{" "}
);
})}{" "}
);
});
//用引导CSS装饰
返回(
{" "}
{tableHeaders}{tableBody}{”“}
);
}
}
//示例数据
var表格数据={
列：[“服务名称”、“成本/单位”、“单位”、“请求的单位”]，
行：[
{
服务名称：“飞机”，
“成本/单位”：50，
单位：“1小时”，
“请求的单位”：12，
网址：
"http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blue.png",
},
{
服务名称：“cat”，
“成本/单位”：50，
单位：“1小时”，
“请求的单位”：12，
网址：
"http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_background.png",
},
{
服务名称：“水果”，
“成本/单位”：50，
单位：“1小时”，
“请求的单位”：12，
网址：
"http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blend.png",
},
{
服务名称：“池”，
“成本/单位”：50，
单位：“1小时”，
“请求的单位”：12，
},
],
};
ReactDOM.render(
,
document.getElementById（“表组件”）
);
    也许你需要这样的东西。实施步骤：

  • 在您的行上添加一个单击侦听器
  • 实现handleRowClick功能，类似于下面的实现。将响应中需要的所有内容保存到React状态
  • 在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")
);

    类TableComponent扩展了React.Component{
状态={}；
handleRowClick=async（）=>{
//在这里进行API调用，比如
常量url=”https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d";
const response=等待获取（url）；
这是我的国家({
…回应，
});
};
render（）{
var dataColumns=this.props.data.columns；
var dataRows=this.props.data.rows；
var tableHeaders=(
{" "}
{dataColumns.map（函数（列）{
返回{column}；
})}{" "}
{" "}
);
var tableBody=dataRows.map（（行）=>{
返回(
{" "}
{dataColumns.map（函数（列）{
返回(
{" "}
);
})}{" "}
);
});
//用引导CSS装饰
返回(
{" "}
{tableHeaders}{tableBody}{”“}
);