javascript - 如何在单击按钮时将 Prop 推送到新页面？

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 引用对象，如下所示？如果是这样，我如何根据单元格位置(考虑日期、名称和类(class)编号)找到特定的 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 将注入(inject) params Prop 看起来像:

{classInfoId: 123}

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