在外部单击或滚动时隐藏下拉列表答案

【问题标题】：Hide the dropdown list when clicking or scrolling on outside在外部单击或滚动时隐藏下拉列表
【发布时间】：2019-04-24 20:58:01
【问题描述】：

在窗格外单击或滚动后，我想关闭我的下拉列表。当我们在下拉框外滚动时，下拉框仍然一直打开..这是我的代码..

static defaultProps = { // <-- DEFAULT PROPS
          wrapperStyle: {
            display: 'inline',

             }, 
          menuStyle: {
                borderRadius: '3px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
                padding: '2px 0',
                fontSize: '90%',
                position: 'fixed',
                minWidth: '300px',
                overflow: 'auto',
                maxHeight: '250px',
                display: 'inline', 
              }  
    }

.................................................. ......

<ReactAutocomplete
                                name="ReferredBy"

                                items = {patientsMasterData.ReferredBy && patientsMasterData.ReferredBy.map(referredObj =>(
                                    {options:referredObj.RefName, 
                                   values:referredObj.RefID}
                                  ))
                                }

                                shouldItemRender={(item, value) => item.options.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                getItemValue={(item) => item.options}
                                renderItem={(item, highlighted) =>
                                    <div
                                    key={item.values}
                                    style={{ backgroundColor: highlighted ? '#3db4e5' : '#FFFFFF',cursor:'pointer', border:'1px solid lighten($grey-element,30%)',padding: '5px}}
                                    {item.options}</div>}
                 inputProps={{placeholder:'Select...'}}
                                menuStyle={this.props.menuStyle}
                                wrapperStyle={this.props.wrapperStyle}
                                value={this.state.value}
                          onChange{e=>this.setState({value:e.target.value})}
                                onSelect={value => this.setState({ value })}

                       />

&css 部分，

&_value1 {
              flex:2;
              white-space: normal;
              width: 100%;
              // overflow-y: auto;
              font-size: 14px;
              position: relative;
              z-index: 2;
              display: inline-block;
              input, textarea {
                width: 100%;
                min-width: 200px;
                height: 25px;
                border: 1px solid $grey-element;
                padding: 0 8px;
                font-size: 12px;   
              }
             &::after {
                position: absolute;
                right: 9px;
                top: 10px;
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px 3px 0 3px;
                border-color: $black transparent transparent transparent;
              }   }

向外滚动时如何隐藏下拉框？

【问题讨论】：

标签： css reactjs autocomplete

【解决方案1】：

简而言之：您需要在下拉列表打开时添加事件侦听器，并在下拉列表中创建 ref 以避免下拉列表中的单击事件，但在单击其他位置时触发它（并在此处删除事件侦听器）。您还可以收听滚动事件。这是实现示例：

import React, {Component} from 'react';
import { CSSTransition } from 'react-transition-group';

class Dropdown extends Component {
    constructor(props) {
        super(props);
        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    };

    setWrapperRef(node) {
        this.wrapperRef = node;
    };

    handleClickOutside(e) {
        e.stopPropagation();
        if (this.wrapperRef && !this.wrapperRef.contains(e.target) && this.props.isOpen){
            this.props.onClose();
        }
    };

    componentDidUpdate(){
        if(this.props.isOpen){
            document.addEventListener('mousedown', this.handleClickOutside);
        } else {
            document.removeEventListener('mousedown', this.handleClickOutside);
        }
    }

   render(){
       return (
            <div className={"dropdown " + (this.props.isOpen ? "show" : "hide")} ref={this.setWrapperRef}>
                <CSSTransition in={this.props.isOpen} timeout={300} classNames="fadeIndown" unmountOnExit={true}>
                        {this.props.children}
                </CSSTransition>
            </div>
        )
    }
}

export default Dropdown;

【讨论】：

但我只是使用自动完成标签。我怀疑，上面的解决方案似乎不起作用。或者如果它起作用，我们如何在这个标签中写它？

【解决方案2】：

const toggleDropdown = () => this.setState({ isDropdownOpen: !this.state.isDropdownOpen });

const closeDropdownThen = fn => (...params) => {
  this.setState({ isDropdownOpen: false });
  return fn(...params);
};

在渲染下，您应该像上面一样定义常量。当你使用

       <Dropdown
            isOpen={isDropdownOpen}
            toggleDropdown={toggleDropdown}
            className={s.dropDownContainer}
            label="Export"
          >
            <DropdownItem onClick={closeDropdownThen(this.abcFunction)}>
               CSV
            </DropdownItem>

这是我的下拉组件，也许它可以帮助你。最好的问候

【讨论】：

谢谢，但反应自动完成标签不支持此功能。