与标准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 (将#修改为@）