在有条件地呈现时，对onClick事件不会触发

Question

我正在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事件不起作用。

我不确定我在哪里做错了。 如果有任何正确的方法，请告诉我。 谢谢。

Answer 1

我终于成功了。

使用的箭头函数_renderDropdown没有任何问题。 问题在于使用_renderDropdown类search-dropdown-container附加到父div的onBlur事件。 我从那里删除了onBlur事件并添加到search-dropdown-wrapper div。 然后它开始正常工作。

我认为， search-dropdown-wrapper位置是fixed ，因此在技术上它不会作为search-dropdown-container一部分。 因此，首先在search-dropdown-wrapper触发onBlur事件的click search-dropdown-container上发生click事件。 因此， click事件不会在search-dropdown-wrapper上触发

Answer 2

请结合this在您在例如像构造函数类的所有方法-

constructor(props) { this._handleScroll = this._handleScroll.bind(this) this._setDropdownBounds = this._setDropdownBounds.bind(this) }

FYI

• https://reactjs.org/docs/handling-events.html
• http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/
• https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56