javascript - React.js 从特定行检索数据

Question

我在 React.js 中创建了一个表，我也使用 Firebase 进行数据存储，这是我的表代码

{tableData.map((row, index) => {
    return (
        <tr key={row + index}>
            {row.map((cell, index) => {
                return (
                    <td key={"cell_" + index} onClick={() => this.handleClick(this.state.userSurname)}>{cell}</td>
                );
            })}
        </tr>
    );
})}

这是我的this.setState：

componentDidMount() {
    db.onceGetUsers().on("child_added", snap =>{
                var username = snap.child("name").child("name").val();
                var surname = snap.child("name").child("surname").val();
               this.setState({ users: this.state.users.concat([username])});
               this.setState({ userSurname: this.state.userSurname.concat([surname])})
    })
  }

这是我的handleClick功能：

  handleClick(event){
    alert(event)
}

所以..这是我的问题，警报对话框显示每个用户的姓氏，而我要做的是显示在表中单击的用户的姓氏.. 我该怎么做？:)

标签： javascriptreactjsfirebasefirebase-realtime-database

Answer 1

如果您不想更改状态结构，则可以这样实现：

handleClick(i){
    alert(this.state.userSurname[i])
}

{tableData.map((row, i) => {
    return (
        <tr key={row + i}>
            {row.map((cell, k) => {
                return (
                    <td key={"cell_" + k} onClick={() => this.handleClick(i)}>{cell}</td>
                );
            })}
        </tr>
    );
})}