Question

我有一个表，它从名为approvalsData的json中检索数据，其中包含字段name，type和owners。表拉数据就好了。对话框打开。但我无法弄清楚如何在对话框中提取行数据。不是整个json数据，只是我点击的行。

我在这里缺少什么？我猜了很多：）

<TableBody>
    {approvalsData.map( (row, index) => (
        <TableRow
            key={index}
            onTouchTap={this.handleApprovalDialogOpen}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.type}</TableRowColumn>
            <TableRowColumn>{row.owner}</TableRowColumn>

            <Dialog
                modal={false}
                contentStyle={dialogStyle}
                open={this.state.open}
                onRequestClose={this.handleApprovalDialogClose}>

                <Col key={index}>
                    <div>Name: <span>{this.name}</span></div>
                    <div>Type: <span>{this.type}</span></div>
                    <div>Owner: <span>{this.owner}</span></div>
                </Col>
            </Dialog>
        </TableRow>
    ))}
</TableBody>

更新

检查源代码，我意识到通过在循环中包含Dialog，我正在为表行的每个实例显示一个对话框。难怪我只是看到了最后一个。其他人都支持它。不管怎样，我把它移到了循环之外，但现在我无法从表格中获取表格行数据。我可以通过指向json本身来获取数据。下面的例子显示了json中的第一个索引，但这不是我想要的。我想显示我要点击的行。

<TableBody>
    {approvalsData.map( (row, index) => (
        <TableRow
            key={index}
            onTouchTap={this.handleApprovalDialogOpen}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.type}</TableRowColumn>
            <TableRowColumn>{row.owner}</TableRowColumn>

        </TableRow>
    ))}
</TableBody>
<Dialog
    modal={false}
    contentStyle={dialogStyle}
    open={this.state.open}
    onRequestClose={this.handleApprovalDialogClose}>

    <Col>
        <div>Name: <span>{approvalsData[0].name}</span></div>
        <div>Type: <span>{approvalsData[0].type}</span></div>
        <div>Owner: <span>{approvalsData[0].owner}</span></div>
    </Col>
</Dialog>

请参阅webpackbin

提前致谢

Answer 1

我假设您在DateTime startupTime = DateTime.Now - UpTime; if(Settings.LastLaunchTime < startupTime) { //system was restarted since the last launch, resetting location } Settings.LastLaunchTime = DateTime.Now; //System up time property TimeSpan UpTime { get { using (var uptime = new PerformanceCounter("System", "System Up Time")) { uptime.NextValue(); //Call this an extra time before reading its value return TimeSpan.FromSeconds(uptime.NextValue()); } } }回调中设置了open状态。您可以将回调绑定到该行的索引（或id，如果有）。

handleApprovalDialogOpen

Answer 2

@ mukesh的方法看起来很稳固。您可能未定义，因为您尝试使用不存在的索引访问approvalsData。尝试他的解决方案并添加：

<TableBody>
    {approvalsData.map( (row, index) => (
        <TableRow
            key={index}
            onTouchTap={(e) => this.handleApprovalDialogOpen(index, e)}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.type}</TableRowColumn>
            <TableRowColumn>{row.owner}</TableRowColumn>
        </TableRow>
    ))}
</TableBody>

将特定的表行数据推送到reactJS中的对话框

2 个答案: