react- on onclickoutside不适用于iframe

Question

我根据reactjs创建自定义下拉列表。我使用react-onclickoutside检测外部区域的点击，并关闭我的下拉列表。它工作得很好，但不适用于单击iframe区域。

import onClickOutside from 'react-onclickoutside';

...

class DevicesGroupsFilter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showGroups: false,  
        };
        this.renderGroups = this.renderGroups.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
        this.handleOnClick = this.handleOnClick.bind(this);
    }

    handleClickOutside(evt) {
        this.setState({showGroups: false});
    }

    handleOnClick(event) {
        this.setState({showGroups: !this.state.showGroups});
    }

    ...

    renderGroups() {
        if (this.state.showGroups) {
            return (<DevicesGroupsFilterList />)
        }
        return ""
    }

    render() {
        let className = "filter-wrap";
        if (this.state.showGroups) {
            className += " filter-dropped-down";
        }     

        return (
            <div className={className} id={this.props.elementId} >
                {this.renderGroups()}   
            </div>  
        )
    }
}


module.exports = {
    DevicesGroupsFilter: onClickOutside(DevicesGroupsFilter),
}

使用(通过react组件的道具传递elementId )：

ReactDOM.render(
        <DevicesGroupsFilter
                ...
                elementId={"my-groups-filter"}
                ...
        />, document.getElementById('place-groups-filter'))

Answer 1

我找到了基于iframeTracker jQuery插件的解决方案。1.安装插件

npm install jquery.iframetracker

使用类iframetrack通过

1. 包装IFrame

<div class="iframetrack" id="my-iframe-id">
    <iframe src="{{ src_url }}" seamless
    style="position: absolute; border: none; zoom:1.0; overflow-y:visible;"
    frameborder="0" width="100%" scrolling="auto" id="i-frame">
    {% trans "Your browser does not support the <iframe> tag" %}
    </iframe>
</div>

1. 为包装的iframe

的模糊事件添加回调处理程序

$('.iframetrack iframe').iframeTracker({
    blurCallback: function() 
    {
        // click when the list dropped down only.
        if ($('#my-groups-filter').hasClass('filter-dropped-down')) 
        {
            $('.filter-content').trigger('click');
        }
    }
});

当我们在封装的iframe区域释放鼠标按钮(鼠标向上)时，blurCallback就会执行。在这个回调中，我们检查过滤器是否有“filter -down down”类。如果过滤器有这个类，那么我们就会为他的闭合生成click。