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),
}

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

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

Answer 1

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

npm install jquery.iframetracker

2。用div iframetrack

包装div的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>

3。为包装的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-dropped-down”类。如果过滤器有这个类，那么我们会为他的结束生成点击。

react-onclickoutside不会在iframe上工作

1 个答案: