单击或滚动到窗格外后，我想关闭下拉列表。当我们在下拉框外滚动时，下拉框始终处于打开状态。。这是我的密码。。
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;
} }
向外滚动时如何隐藏下拉框？
简而言之：当下拉列表打开时，您需要添加事件侦听器，并在下拉列表上进行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;
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>
这是我的下拉组件，也许它对你有帮助。向致以最良好的问候