在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'
            />
        )
    }

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

Answer 1

一种天真的方法是将表的详细信息放在pop触发器中

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

它可以工作，但它不是最整洁或最优的代码