时间戳

首页 > 解决方案 > 表格中的可点击行

django - 表格中的可点击行

问题描述

我有一个用 Django 编写的后端，我正在使用 REST API 将它与 React 前端连接起来。我有一个表格，其中包含从我的 API 获取的数据。

问题是如何使这些行可点击，所以当我点击表格行时，我会获得有关该行代表什么的更多信息。我需要打开一个新页面，其中将显示有关该特定行的更多信息。

标签： djangoreactjsapirow

解决方案

要使一行可点击，只需将 onClick 属性添加到指向元素中的方法/函数的标记即可。像这样的东西：

    import React, { Component } from 'react';

    class App extends Component {
              constructor(props){
    super(props);
    this.state={rowDetails:''};
    this.doSomething=this.doSomething.bind(this);

    }
    doSomething=()=>{
    this.setState({rowDetails:"the details about the clicked row"})
    }

    render(){
      return(
    <table>
    <tr onClick={this.doSomething} >
            <td>cell data</td>
            <td>cell data</td>
    </tr>
    <p> {this.state.rowDetails} </p>
    </table>
      )
    }
    }

推荐阅读