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

Answer 2

来自文档once：

检索项目列表或侦听项目列表的添加项。对于每个现有子项，将触发此事件一次，然后每次将新子项添加到指定路径时再次触发此事件。侦听器将传递一个包含新子项数据的快照。

要显示仅在表中点击的用户的姓氏，您需要读取一次数据，例如：

params[:file][:filename]

params[:file][:tempfile]

仅侦听指定事件类型的一个事件，然后停止侦听。

更多信息：

https://firebase.google.com/docs/reference/js/firebase.database.Reference#once

React.js从特定行检索数据

2 个答案: