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)
}

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

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>
    );
})}