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

【问题标题】：How can I Add onClick functionality to particular column in React Js?如何将 onClick 功能添加到 React Js 中的特定列？
【发布时间】：2020-12-22 16:39:21
【问题描述】：

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

示例： enter image description here 图中有两个链接。当用户点击任何链接时。 Reactplayer 应该将该链接作为 url 值并打开反应播放器

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

【问题讨论】：

标签： javascript reactjs datagrid react-player

【解决方案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>,
}
})

【讨论】：

嗨。更改状态将在 onchange 事件或 onclick 事件上完成。如何在该单元格单击上应用 Onclick 事件？？
onClickHandler = (event) =>{ this.setState({event.target.value}) }
请在问题中找到更新后的代码。我无法在文件链接中应用 onclick。请指教。 File_Link 也是一个数组