我正在React中构建一个searchDropdown组件.我只想在搜索字段处于活动状态时才显示下拉列表.因此,我为渲染下拉列表设置了条件.
但是,当有条件地呈现下拉列表时,下拉列表中的onClick事件不会触发.
我的组件在下面.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {List, ListItem} from 'material-ui/List';
import {Card} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import TextField from 'material-ui/TextField';
import resources from '../../resources/resources';
import cx from 'classnames';
import './SearchDropdown.scss';
class SearchDropdown extends Component {
constructor(props) {
super(props);
this.cardContainerStyle = {
'maxHeight': '300px',
'overflow': 'scroll',
'border': '1px solid rgb(158, 158,158)'
};
this.searchFieldUnderlineStyle = {
'borderBottom': '1px solid #ccc'
}
this.state = {
dropdownStyle: {}
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.isActive && this.props.isActive !== nextProps.isActive) {
this.shouldSetBounds = true;
} else {
this.shouldSetBounds = false;
}
}
componentDidUpdate() {
if(this.shouldSetBounds) {
this._setDropdownBounds();
this.shouldSetBounds = false;
}
}
componentDidMount() {
window.addEventListener('scroll', this._handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this._handleScroll);
}
_handleScroll = () => {
if (this.props.isActive) {
this._setDropdownBounds();
}
}
_setDropdownBounds() {
const dropdownContainerOffset = this.dropdownContainer.getBoundingClientRect();
const containerTop = dropdownContainerOffset.top;
const containerLeft = dropdownContainerOffset.left;
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
const dropdownStyle = {
top: dropdownContainerOffset.top + dropdownContainerOffset.height,
left: dropdownContainerOffset.left
};
if (containerTop > viewportHeight/2) {
dropdownStyle.top = 'auto';
dropdownStyle.bottom = viewportHeight - containerTop;
}
this.setState({ dropdownStyle });
}
_renderDropdown() {
const {onSelect, datalist = []} = this.props;
return (
<div className="search-dropdown-wrapper" style={this.state.dropdownStyle} onClick={(event) => {alert("Outer wrapper")}}>
<Card containerStyle={this.cardContainerStyle}>
<div>
{"Sample Dropdown"}
</div>
</Card>
</div>
);
}
_renderSearchField() {
const {value, handleSearch} = this.props;
return (
<TextField
value={value}
onChange={handleSearch}
fullWidth={true}
hintText={resources.BRAND_SEARCH}
underlineStyle={this.searchFieldUnderlineStyle}
/>
);
}
render() {
const {isActive, onBlur} = this.props;
return (
<div className="search-dropdown-container field-wrapper"
ref={dropdownContainer => this.dropdownContainer = dropdownContainer}
onBlur={onBlur}
>
{this._renderSearchField()}
{isActive && this._renderDropdown()}
</div>
);
}
}
SearchDropdown.propTypes = {
isActive: React.PropTypes.bool.isRequired,
value: React.PropTypes.string,
datalist: React.PropTypes.array,
handleSearch: React.PropTypes.func.isRequired,
onSelect: React.PropTypes.func
}
export default SearchDropdown;
在上面的代码中,_renderDropdown仅在isActive为true时执行.当搜索字段处于活动状态时,该组件可以完美地呈现所有样式.但是,当呈现此组件时,带有类search-dropdown-wrapper的div上的onClick事件不起作用.
我不确定我在哪里做错.请让我知道是否有任何适当的方法来执行此操作.谢谢.
解决方法:
我终于做到了.
使用的箭头函数_renderDropdown没有任何问题.问题在于on_lur事件通过_renderDropdown类的search-dropdown-container附加到父div.我从那里删除了onBlur事件,并将其添加到search-dropdown-wrapper div中.然后它开始正常工作.
我认为是,search-dropdown-wrapper的位置是固定的,因此从技术上讲,它不会作为search-dropdown-container的一部分.因此,发生在search-dropdown-wrapper上的click事件首先触发search-dropdown-container的onBlur事件.因此,click事件不会在search-dropdown-wrapper上触发