Question

当在外部单击下拉菜单时，我有一个代码可以捕获，

renderTypes() {
    return _.map(this.props.items, (item, index) => {
        return (
                    <div className="ui icon top dropdown" tabIndex="0">
                        <div className={"menu transition" + classe} 
                             tabIndex="-1"
                             ref={node =>  this.node = node }/>
                    </div>
        );
    });
}

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}

handleClickOutside(e){
    const domNode = ReactDOM.findDOMNode(this.node);

    if(!domNode || !domNode.contains(e.target)){
        this.setState({open: ""});
    }
}

但是实际上，这仅适用于最后一个下拉列表。我很确定这是因为ref不能很好地分配给我的div，我想知道如何在地图中使用它。

我的代码是否正确或我错过了什么？

Answer 1

在像ref={node => this.node = node }这样的映射中分配ref时，相同的ref被覆盖，因此ref仅保留最后一个节点的实例。您应该改为在Dropdown项目周围的包装中添加参考

renderTypes() {
    return <div ref={node =>  this.node = node }>{_.map(this.props.items, (item, index) => {
        return (
                    <div className="ui icon top dropdown" tabIndex="0">
                        <div className={"menu transition" + classe} 
                             tabIndex="-1"
                         />
                    </div>
        );
    })}</div>;
}

通过地图对多个元素进行引用

1 个答案: