Строка в таблице с возможностью нажатия

Question

У меня есть бэкэнд, написанный на Django, и я использую REST API для подключения его к интерфейсу React. У меня есть таблица, заполненная данными, которые я получаю из моего API.

Вопрос в том, как сделать эти строки доступными для кликов, чтобы при нажатии на строку таблицы я получал больше информации о том, что представляет эта строка. Мне нужно будет открыть новую страницу, на которой будет отображаться дополнительная информация об этой строке c.

Answer 1

, чтобы сделать строку интерактивной, просто добавьте свойство 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>
      )
    }
    }

Answer 2

Надеюсь, это поможет вам. Попробуйте добавить событие onClick в свой tr , что-то вроде этого

const Table = (props) => (
    <tr onClick={e => this.doSomething(e)}>
      <td>...</td>
    </tr>
);

doSomething(e) {
    console.log(e);
}

В функции doSomething () вы можете написать свою функцию для перенаправления данных, используя props.history.push("route-name");.