如何将 onClick 功能添加到 React Js 中的特定列？

Question

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

示例：在此处输入图像描述在图像中有两个链接。 当用户点击任何链接时。 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',
width:50,
dataType:'string';
},
{
datakey:'File_Link',
label:'File_Link',
width:50,
dataType:'string';
}
]

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

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

Answer 1

在组件的 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>,
}
})