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

Posted 2023-02-22

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

【英文标题】：React - Triggering click event on table row and display the selected row details in another page

【发布时间】：2018-12-23 13:33:57

【问题描述】：

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

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

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

我已经检查了这篇文章，但我需要更多。 React - Triggering click event on table row

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：无法在“历史”上执行“pushState”：函数 createHref(location)

【参考方案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]    

【讨论】：

我没有得到历史。越来越不确定。包括这一行以及 import withRouter from 'react-router-dom';

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));组件上的这一行将历史对象放入道具中。

现在我可以获取历史对象，但不能获取所选行的详细信息。在推送中设置状态存在问题。

感谢 Adnan 的初步指导。这确实有助于进一步发展。

【参考方案2】：

How to access custom attributes from event object in React?

Jared Forsyth 在上述帖子中的更新回答帮助我解决了这个问题。

第一个组件

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

        onLogout=function (data) 
              this.props.history.push(
                pathname: '/details',
                 state: 
                    key: data
                 
            );  
        

    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 data-item=data onClick=()=>this.onLogout(data)>
                        <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.state.key)

              return (
                  <div>
                          <div className="title">this.props.location.state.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;