Question

我有一个表，显示来自json（动态）的多个记录。当您单击所需的行时，会出现一个包含其中操作的对话框（记录计数，拒绝，批准，关闭对话框，下一条记录和上一条记录）。

除了next和prev功能之外，我几乎都在工作。我认为++上的--和rowIndex将获取下一次迭代（顺便说一句，这是我的angularJS思维过程，因为我已经在Angular中创建了它，但我们正在转换为ReactJS ），但很明显，它并没有这样做。

这些是我创建的功能，但是，您可以在我的webpackbin中看到一个极简主义的代码片段，您可以用它来玩它：

//Pull the next item
handleApprovalDialogNext = (rowIndex, openIndex, event) => {
    this.setState(
        {
            openIndex: rowIndex++,
        }, () => {this.setState({ open: true })}
    )
};

//Pull the prev item
handleApprovalDialogPrev = (rowIndex, openIndex, event) => {
    this.setState(
        {
            openIndex: rowIndex--,
        }, () => {this.setState({ open: true })}
    )
};

以下是我webpackbin

的链接

P.S。理想情况下，如果该项目是第一个项目，则不应允许您返回（可能禁用箭头图标）。当你到达数据末尾时也一样。

任何帮助都会非常感激。

Answer 1

您的webpackbin收到错误并且无法加载。但是，我认为您应该从this.state.openIndex而不是rowIndex添加/减去。不确定为什么要在回调中设置open。在React docs https://facebook.github.io/react/docs/react-component.html#setstate中不鼓励使用Setstate回调。

//Pull the next item
handleApprovalDialogNext = (rowIndex, openIndex, event) => {
    this.setState({
        openIndex: this.state.openIndex + 1,
        open: true
    });
};

//Pull the prev item
handleApprovalDialogPrev = (rowIndex, openIndex, event) => {
    this.setState({
        openIndex: this.state.openIndex - 1,
        open: true
    });
};

另外，请查看How to uses increment operator in React，了解您应该使用+ 1而不是++的原因。

要有条件地渲染图标，您只需要检查当前的openIndex是否是数据中的第一个或最后一个索引。

它看起来像这样：

<Col className="floating-close layout-column">
    <IconButton>
      <i className="material-icons">close</i>
    </IconButton>
    {this.state.openIndex > 0 &&
    <IconButton>
      <i className="material-icons left">chevron_left</i>
    </IconButton>}
    {this.state.openIndex < approvalsData.length &&
    <IconButton>
      <i className="material-icons right">chevron_right</i>
    </IconButton>}
</Col>

将动态表中的下一行数据拉入ReactJS中的对话框

1 个答案: