作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
单击单个行时,我有一个 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(位置){
最佳答案
如果您使用react-router,那么您可以将数据发送到下一个路由
import { withRouter } from 'react-router-dom'
nextRoute = () => {
this.props.history.push({
pathname: "pathnamehere",
state: {
key: this.state
}
});
};
并且您也可以在下一个路由中获取数据
props.location.state.key.[propertyName]
关于javascript - React - 触发表行上的单击事件并在另一个页面中显示所选行的详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51354437/
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止,我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀!