我如何在React Js的特定列中添加onClick功能？

如何解决我如何在React Js的特定列中添加onClick功能？

我有一个数据网格，其中有一列名为File_link。我想向该字段添加功能，以便当用户单击该单元格时，它应该打开react player并将该单元格值作为url传递给react player。我已经创建了react player和datagrid。

示例： enter image description here 在图像中有两个链接。当用户单击任何链接时。 Reactplayer应该将该链接作为URL值并打开React Player

<ReactPlayer
        ref={playerRef}
        width={"100%"}
        height={"100%"}
        url="xyz" -----> the value of the cell should be passed to this.
        muted={muted}
        playing={playing}
        volume={volume}
        playbackRate={playbackRate}
        onProgress={handleProgress}
      />

//data for table 
const datafortable = this.state.recordingdata1.map((mapvalue,index) => {
return{
id=index+1,application:mapvalue.applicationname,File_Link=<a target ="_blank" href={mapvalue.File_Link}></a>,}
})


//data for column config
ColConfig=[
{
datakey:'id',label:'id',width:50,dataType:'number';
},{
datakey:'application',label:'application',dataType:'string';
},{
datakey:'File_Link',label:'File_Link',dataType:'string';
}
]

//calling table
<Table 
fundColConfig=ColConfig
data={datafortable}
>

//datagrid in table.js
<DataFGrid
columns={this.props.fundColConfig}
keyFeildName="id"
data={this.state.data}
/>

解决方法

在组件的this.state中维护一个URL，使用this.setState（）对其进行更改，然后在包含播放器时，编写如下内容：

<ReactPlayer url={ this.state.url } /> 


  onClicked() {
   this.setState({url:event.target.value}
}

     const datafortable = this.state.recordingdata1.map((mapvalue,index) => {
return{
    id=index+1,application:mapvalue.applicationname,File_Link=<a target ="_blank" href={mapvalue.File_Link} onClick = {this.onClicked}></a>,}
})