javascript - 如何将 onClick 功能添加到 React Js 中的特定列?
问题描述
我有一个数据网格,其中有一列名为 File_link。我想向该字段添加功能,以便当用户单击该单元格时,它应该打开反应播放器并将该单元格值作为 url 传递给反应播放器。我已经创建了反应播放器和数据网格。
示例: 在此处输入图像描述 在图像中有两个链接。当用户点击任何链接时。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}
/>
解决方案
在组件的 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>,
}
})
推荐阅读
- c# - ASP.Net MVC 如何操作配置文件中的自定义条目
- javascript - 如何获得定义
- amazon-eks - 服务类型=负载均衡器未更新 ELB 实例端口
- typescript - 使用带有 typeScript 的 redux
- keil - 调试器显示在全局变量限制处截断
- python - Django Factory Boy 工厂中的简单计算已关闭
- javascript - 如何提供解决此 Material UI 警告的值?
- html - 我的弹出表单一直闪烁(Windows、Chrome)
- reactjs - React Materialise Switch 的值总是“on”
- reactjs - 如何从 react native 发布请求 python 方法?