Question

我正在使用React，Redux＆amp; Material-UI用于开发。我正在显示一个表，该表是从通过Ajax从服务器获取的数据生成的。

一般情况下一切正常，但我不知道如何从生成的表中选择一个-n后识别用户。

在下面我将只显示一小段代码，因为整个代码不需要向我提供帮助（如果我错了，请纠正我）

{allUser != null ? allUser.map((row, index) => (
                        <TableRow className="testx" key={row.userID} selected={row.selected}>
                            <TableRowColumn>
                                {/*
                                 <UserCard
                                 userData={row}
                                 displayPersonalInfo={true}
                                 showRequestDates={false}
                                 showChangePassword={false}
                                 />

                                */}
                                {row.userID}
                            </TableRowColumn>
                        </TableRow>
                    ))
                        : <TableRow><TableRowColumn>{"Keine Einträge vorhanden"}</TableRowColumn></TableRow>
                    }

所以我在这里做的很简单。我刚刚生成了一个包含UserCard的表。我已将multiSelectable: true,设为默认状态。

我添加了onRowSelection={this.rowSelection.bind(this)}

rowSelection(key){
    console.log("select")
    console.log(key)
}

选择一行后，key有一个值，所以这也有效。但是

作为密钥我使用了userID key={row.userID}，但它似乎没有任何影响。如果密钥属性是识别所选用户的错误方法，那么这样做的正确方法是什么？

为什么我的userID没有被用作密钥？如何识别表中用户选择的用户？

希望有人能在这里帮助我！

编辑：

这是我的render()代码，似乎是获得正确答案所必需的。

return (
        <div id="requestSummaryTable">
            <Table
                height={this.state.height}
                fixedHeader={this.state.fixedHeader}
                fixedFooter={this.state.fixedFooter}
                selectable={this.state.selectable}
                multiSelectable={this.state.multiSelectable}
                onRowSelection={this.rowSelection.bind(this)}
            >
                <TableHeader
                    displaySelectAll={this.state.showCheckboxes}
                    adjustForCheckbox={this.state.showCheckboxes}
                    enableSelectAll={this.state.enableSelectAll}
                >
                    {/*
                     <TableRow>
                     <TableHeaderColumn colSpan="3" tooltip="Urlaubsanträge" style={{textAlign: 'center'}}>
                     Übersicht Urlaubsanträge
                     </TableHeaderColumn>
                     </TableRow>
                     */}

                    <TableRow>
                        <TableHeaderColumn tooltip="Name">Nutzer</TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody
                    displayRowCheckbox={this.state.showCheckboxes}
                    deselectOnClickaway={this.state.deselectOnClickaway}
                    showRowHover={this.state.showRowHover}
                    stripedRows={this.state.stripedRows}
                >

                    {allUser != null ? allUser.map((row, index) => (
                        <TableRow className="testx" key={row.userID} value={row.userID} selected={row.selected}>
                            <TableRowColumn>
                                {/*
                                 <UserCard
                                 userData={row}
                                 displayPersonalInfo={true}
                                 showRequestDates={false}
                                 showChangePassword={false}
                                 />

                                */}
                                {row.userID}
                            </TableRowColumn>
                        </TableRow>
                    ))
                        : <TableRow><TableRowColumn>{"Keine Einträge vorhanden"}</TableRowColumn></TableRow>
                    }
                </TableBody>
            </Table>
        </div>
    );

我可以以某种方式将select事件绑定到行，以提供userID作为参数或这是如何工作的？它似乎比它应该更复杂，或者？

EDIT2：

或者是唯一的方法，访问生成表行的数据并将数组索引与行索引进行比较？

Answer 1

根据您提供的代码，我可以看到您有

onRowSelection={this.rowSelection.bind(this)}

但是您的rowSelection签名需要key作为第一个参数，并且您没有传递它，因此函数内的key为undefined。

您必须将其更改为

onRowSelection={this.rowSelection.bind(this, row.userID)}

将密钥属性用作唯一标识符

1 个答案: