通过地图对多个元素进行反应

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项目周围的包​​装中添加ref

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