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）而不是Buttons，其中每个链接包含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和actions。

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

如果我正确地理解你的问题......我建议你研究一下'push'动作，它是react-router-redux的一部分。

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

搜索“推送”并查找他们展示如何使用的示例：

store.dispatch（推（ '/富'））

他们正在做的是将用户从他们现有的页面引导到下一页'/ foo'而不会丢失他们的状态。

由于您的状态得以维护，因此一旦您进入下一页，您就可以查看Redux商店，并且所有商店数据仍应存在。

希望这会有所帮助。

Answer 4

在重定向到下一页之前，您应该创建调度程序以将对象存储到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');
}

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

4 个答案: