如何解决与标准JS库一起使用时未调用React onClick
我正在迁移旧版应用程序以做出反应,但不幸的是,在该应用程序中,我们使用的是https://datatables.net/之类的不同JS库。
DataTable在React之外操作DOM,因此onClick事件不适用于Children组件,例如<SdrRow />
。
我想知道是否有任何技巧将onClick事件附加到由React外部的DOM修改独立触发的组件上。
class SdrsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
sdrs: props.sdrs,context: props.context
}
this.ref = React.createRef();
}
componentDidMount() {
console.log(this.el);
this.$el = $(this.el)
this.$el.DataTable({
rowId: 'code',order: [],pageLength: 50,columns: [
{data: 'action'},...
],responsive: {
details: {
renderer: function (api,rowIdx,columns) {
// render logic when user collapses one row (tr appended outside React too)
}
}
},});
}
render() {
let rows = [];
for (let i=0; i < this.state.sdrs.length; i++) {
rows.push(<SdrRow key={i} context={this.state.context} sdr={this.state.sdrs[i]}/>);
}
return (
<table id="sdr_preview_table" className="display table text-nowrap dt-responsive"
ref={el => this.el = el }
style={{width: "100%"}} width="100%">
<thead>
...
</thead>
<tbody>
{rows}
</tbody>
</table>
);
}
}
class SdrRow extends React.Component {
constructor(props) {
super(props);
this.state = {
sdr: props.sdr,context: props.context,}
}
handleClick = (e) => {
e.preventDefault();
console.log('triggered');
}
render() {
return (
<tr className="sdr_preview">
<td>
....
</td>
<td>
<div className="sdr_preview_action">
<a href="#"
onClick={(e) => this.handleClick(e)}
Modifica
</a>
</div>
</td>
</div>
</tr>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。