javascript - React - 在表格行上触发点击事件并在另一个页面中显示所选行的详细信息

Question

单击单个行时，我有一个包含 10 行的数组，我需要转到新路线，在该路线中我需要填充所选行的详细信息。截至目前，我正在获取完整的行数据，但是如何引用以获取行数据新页面。

如何在新页面中获取 data.title 和 data.score。

我是新手，任何指导都会有所帮助。

我已经检查了这篇文章，但我需要更多。React - 在表格行上触发点击事件

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';
import './Main.css';
class Main extends Component {

    constructor(props){
        super(props);
    }

    state= {

    }


    detailsView = (event) => {
        const row = event.currentTarget;
        console.log(row);
        console.log(event);
    }

    render() {
      let moviestorender = '';

      if(this.props.news.newsArray && this.props.news.newsArray.length ==10 && this.props.news.userProfile && this.props.news.userProfile.length ==10){

     moviestorender = this.props.news.newsArray.map((data, i) => {
          if (i < 9)
          {
            return (
                 <tr key={data.id} onClick={this.detailsView}>
                        <td className="title">{data.title}</td>
                        <td className="row">{data.score}</td>
                        <td className="row">{data.by}</td>
                        <td className="row">{data.karma}</td>
                        <td className="row">{data.created}</td>
                </tr>
            )
          }
        })
      }

      return(

        <div className="mainStart">
            <table><tbody><tr>
                        <th className="title">Title</th>
                        <th className="row">Score</th>
                        <th className="row">Author</th>
                        <th className="row">Author's Karma</th>
                        <th className="row">Date Created</th>
                    </tr>{moviestorender}</tbody></table>

        </div>
      )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Main);

编辑2： 我们单击该行的第一个组件

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';

import './Main.css';
class Main extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
        }

        onLogout(props) {
            this.props.history.push({
                pathname: '/details',
                /* state: {
                    key: this.state
                } */
            });
        }

    state= {

    }


    render() {
      let moviestorender = '';

      if(this.props.news.newsArray && this.props.news.newsArray.length === 10 && this.props.news.userProfile && this.props.news.userProfile.length === 10){

     moviestorender = this.props.news.newsArray.map((data, i) => {
          if (i < 9)
          {
            return (<tr key={data.id} onClick={this.onLogout}>
                        <td className="title">{data.title}</td>
                        <td className="row">{data.score}</td>
                        <td className="row">{data.by}</td>
                        <td className="row">{data.karma}</td>
                        <td className="row">{data.created}</td>
                </tr>)
          }
        })
      }

      return(

        <div className="mainStart">
            <table>
                <tbody>
                    <tr>
                        <th className="title">Title</th>
                        <th className="row">Score</th>
                        <th className="row">Author</th>
                        <th className="row">Author's Karma</th>
                        <th className="row">Date Created</th>
                    </tr>{moviestorender}
                </tbody>
            </table>

        </div>
      )
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main)); //  this is used to get the history object from with router and to connect to store

单击该行时导航的第二个组件。现在关键是一个字符串

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Details extends Component {

    render() {
        let news = '';

        if(this.props.location.key){

              return (
                  <div>
                          <div className="title">{this.props.location.key.title}</div>
                          <div className="row">{this.props.location.key.score}</div>
                          <div className="row">{this.props.location.key.by}</div>
                          <div className="row">{this.props.location.key.karma}</div>
                          <div className="row">{this.props.location.key.created}</div> 
                  </div>
                  )

        }

        return(

          <div className="mainStart">
                <h1> This is a details page </h1>
                {news}
                <Link to='/'>Home</Link>
          </div>
        )
      }
}

export default Details;

当尝试设置您提到的状态时，出现以下错误 DataCloneError: Failed to execute 'pushState' on 'History': function createHref(location) {

标签： javascriptreactjs

Answer 1

如果您使用的是 react-router，那么您可以将数据发送到下一个路由

 import { withRouter } from 'react-router-dom'

 nextRoute = () => {
 this.props.history.push({
  pathname: "pathnamehere",
  state: {
    key: this.state
   }
 });
};

您还可以在下一条路线中获取数据

props.location.state.key.[propertyName]