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

Question

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

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

代码：

http://jsfiddle.net/k7wbzc4j/16/

<table className="test-table">
  <thead>
    <tr>
      <th>List</th>
      <th colSpan="2">Monday</th>
      <th colSpan="2">Tuesday</th>
    </tr>
    <tr>
      <th>Names</th>
      <th>Class 1</th><th>Class 2</th>
      <th>Class 1</th><th>Class 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kev</td>
      <td><button>abc</button></td><td><button>def</button></td>
      <td><button>ghi</button></td><td><button>jkl</button></td>
    </tr>
    <tr>
      <td>Josh</td>
      <td><button>mno</button></td><td><button>pqr</button></td>
      <td><button>stu</button></td><td><button>vwx</button></td>
    </tr>
  </tbody>
</table>

将接受并投票赞成答案。提前谢谢你

编辑

表行数据是否应该像这样构造并基于 ID 引用对象，如下所示？如果是这样，我如何根据单元格位置（考虑到日期、姓名和班级编号）定位该特定 id 对象？

list: [
  {
    name: Kev
      monday: {
        class1: {
          id: 0,
          classTitle: abc,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class 2: {
          id: 1,
          classTitle: def,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
      tuesday: {
        class1: {
          id: 2,
          classTitle: ghi,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class 2: {
          id: 3,
          classTitle: jkl,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
  },

  {
    name: Josh, 
      monday: {
        class1: {
          id: 4,
          classTitle: mno,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class2: {
          id: 5,
          classTitle: pqr,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
      tuesday: {
        class1: {
          id: 6,
          classTitle: stu,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class2: {
          id: 7,
          classTitle: vwx,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
    }
  }
]

Answer 1

您的 JSFiddle 不使用 react-router 或 react-redux，因此没有人能够指向您的代码的一个特定位置并告诉您具体要采取哪些不同的做法。

也就是说，执行此操作的一种典型方法是在表格中使用常规链接（或 react-router Links）而不是按钮，其中每个链接都包含一个 id 参数：

/newpage/<id>

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

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

。例如，当用户在您的应用程序中访问/newpage/123 时，将呈现NewPage 组件。 React-router 将注入一个 params 属性，如下所示：

{classInfoId: 123}

。然后，您从 Redux 存储中获取 id 为 123 的类信息对象，并根据需要显示它。

Answer 2

使用 redux reducer 和操作。

在点击事件时，将您的状态减少为存储 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>

为 setCurrentCell 创建操作以存储当前单元格 ID，并将其与 mapStatesToProps 一起注入新表中。

Answer 3

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

链接：https://github.com/reactjs/react-router-redux

搜索“push”并查找他们展示它的示例，如下所示：

store.dispatch(push('/foo'))

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

因为你的状态是被维护的，一旦你进入下一页，你可以窥视你的 Redux 存储并且你所有的存储数据应该仍然存在。

希望这会有所帮助。

Answer 4

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

下面是代码sn-p。

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