Javascript 如何在点击按钮时将道具推到新页面？

我现在有一个表格，每个单元格都有一个按钮。单击按钮后，根据特定的日期（星期一或星期二）、类别（类别1或类别2）和名称（Kev或Josh），如何将表中与该特定按钮相关的对象推送到新页面？使用ReactJS+reactrouter+Redux，正确的方法是什么

当导航到新页面时，新页面将用传入的对象的类信息填充一个表，这些信息与单击的按钮单元格相关

代码：

---

您的JSFIDLE不使用react-router或react-redux，因此没有人能够指出您代码的某个特定位置，并告诉您具体要做什么

也就是说，一种典型的方法是在表中使用常规链接（或react router），而不是按钮，其中每个链接都包含一个

id

参数：

/newpage/

。然后声明一个react路由器路由，它将路由映射到组件：

<Route path="newpage" component={NewPage}>
  <Route path=":classInfoId" component={NewPage} />
</Route>

。例如，当用户访问应用程序中的

/newpage/123

时，将呈现

newpage

组件。React路由器将注入一个

params

prop，如下所示：

{classinfo:123}

---

。然后从Redux store获取id为

123

的class info对象，并根据需要显示它。

如果我正确理解了您的问题。。。我建议您研究react router redux中的“推送”操作

链接：

搜索“推送”并查找示例，其中展示了正在使用的推送，如下所示：

store.dispatch（push（'/foo'））

他们在那里做的是将用户从现有页面引导到下一个页面“/foo”，而不丢失其状态

因为你的状态是保持的，一旦你进入下一页，你可以窥视你的Redux商店，你所有的商店数据都应该还在那里

---

希望这有帮助

在重定向到下一页之前，应该创建调度程序，将对象存储到redux状态容器中

下面是代码片段

<Button disabled={!this.state.selectedParent} onClick={this.goNextPage} />

goNextPage() {
    const {dispatch} = this.props;
    dispatch(saveSelectedOrganization({
        parentNode:this.state.selectedParent,
        organizationData: this.props.list
    }));

    browserHistory.push('/admin/orgatnizations/create');
}

goNextPage（）{
const{dispatch}=this.props；
调度（保存选定的组织）({
父节点：this.state.selectedParent，
organizationData:this.props.list
}));
browserHistory.push（'/admin/organizations/create'）；
}

使用redux减缩器和操作

单击事件时，将您的状态降低为存储id或classTitle。我猜您正在使用现有数据动态呈现表

onClick = (id) => () => {
  this.props.setCurrentCell(id) // setCurrentCell is your action
  this.props.push('/new-page') // push is react-router-redux action. These actions are mapped into props with mapDispatchToProps
}

// td rendering
<td><button onClick={this.onClick(cell.id)}>{cell.classTitle}<td>

onClick=（id）=>（）=>{
this.props.setCurrentCell（id）//setCurrentCell是您的操作
this.props.push（“/new page”）//push是react router redux操作。这些操作通过mapDispatchToProps映射到props中
}
//td渲染
{cell.classTitle}

---

为setCurrentCell创建操作以存储当前单元格id，并使用MapStateStorops将其注入新表中

如果可以的话，您能否给出一个非常浅显的示例来说明您的建议——特别是关于如何存储按钮的对象，以及组件如何识别已单击的按钮，并找到该特定按钮的对象？这确实有助于澄清。例如，每个按钮都应该有自己的id？请查看原始帖子。这就是数据的结构吗？检查是否收到我之前的评论。请让我知道。感谢您的回复。cell.id从何处检索，组件将如何基于其自身的特定id拉下道具？数据应该如何结构化？我的一个样本在原始帖子中。@JoKo

cell.id

我的意思是你的数据页的id。当前的数据结构看起来不错。但是，您希望通过将数组映射到react组件来呈现表

td

s，而不是手动呈现它们。您介意展示一个示例以及为澄清而提供的代码吗？@sean感谢您的回答。组件如何知道要下拉哪些id道具，以及组件如何基于自己的特定id下拉道具？对于数据的结构有何建议？我的一个示例在原始帖子中。但是对于一个专门用于特定按钮的页面，这将如何工作呢？可能是重复的

<Button disabled={!this.state.selectedParent} onClick={this.goNextPage} />

goNextPage() {
    const {dispatch} = this.props;
    dispatch(saveSelectedOrganization({
        parentNode:this.state.selectedParent,
        organizationData: this.props.list
    }));

    browserHistory.push('/admin/orgatnizations/create');
}

onClick = (id) => () => {
  this.props.setCurrentCell(id) // setCurrentCell is your action
  this.props.push('/new-page') // push is react-router-redux action. These actions are mapped into props with mapDispatchToProps
}

// td rendering
<td><button onClick={this.onClick(cell.id)}>{cell.classTitle}<td>