javascript - 在 ReactJS 中单击 DataTable 行上的打开弹出窗口

Question

我正在使用 reactjs-popup 和 react-data-table-component npm 库，我想在单击一行时打开一个弹出窗口。

这是我的代码：

    onRowClicked = (rowData,e) => {
        return (<Popup
            trigger={/*e.target.value*/}
            modal>
            {
                close => (
                    <div>
                      // some code
                    </div>
                )
            }
        </Popup>)
    }

    render() {
        return (
            <DataTable
                title={title}
                columns={columns}
                data={data}
                highlightOnHover={true}
                pointerOnHover={true}
                onRowClicked={this.onRowClicked}
                noDataComponent='No content'
            />
        )
    }

是否可以将trigger属性绑定Popup到单击的行？

Answer 1

例如，一种天真的方法是将表详细信息放在弹出触发器中

render() {

    let SongList = this.state.Songs.map(({Artist,Title, Album, Id}, index) => {
            return (   
              <Popup modal trigger={<tr key={Id}  >
                      <td>{index+1}</td>
                      <td>{Artist}</td>
                      <td>{Title}</td>
                      <td>{Album}</td>
                  </tr>}>
                  {close => <Content4 close={close} />}
                </Popup>
            );
          });
    return(
    <>
        {SongList}
      </>
     );
}

它可以工作，但它不是最简洁或最佳的代码