Javascript 在don'之外作出反应；我不能在iframe上工作

我基于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 onClickOutside”导入onClickOutside；
...
类DeviceGroupsFilter扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
展示组：错误，
};
this.renderGroups=this.renderGroups.bind（this）；
this.handleClickOutside=this.handleClickOutside.bind（this）；
this.handleOnClick=this.handleOnClick.bind（this）；
}
外部把手（evt）{
this.setState（{showGroups:false}）；
}
点击（事件）{
this.setState（{showGroups:！this.state.showGroups}）；
}
...
renderGroups（）{
if（this.state.showGroups）{
返回（）
}
返回“”
}
render（）{
让className=“filter wrap”；
if（this.state.showGroups）{
className+=“过滤器已下拉”；
}     
返回(
{this.renderGroups（）}
)
}
}
module.exports={
DeviceGroupsFilter:单击外部（DeviceGroupsFilter），
}

使用（通过react组件的道具传递elementId）：

ReactDOM.render(
，document.getElementById（'place-groups-filter'））

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

npm install jquery.iframetracker

二,。使用classiframetrack

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

当我们在包裹的iframe区域中释放鼠标按钮（鼠标向上）时，将执行模糊回调。在此回调中，我们检查过滤器是否具有“filter Dropdown”类。如果过滤器有这个类，那么我们将为他的关闭生成click

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

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