使用 fontawesome 时 onClick 不触发

Question

我有一个 React 组件 SearchField，它是输入的包装器。我正在尝试让 fontawesome (x) 在单击时清除输入框，但所有让 onClick 触发的尝试都失败了。

如果我剪切并粘贴到父级 div，则会触发 onClick。如果我将元素更改为元素，它仍然会失败。我尝试使用 chrome 工具手动将它定位在输入之外，但它仍然无法触发。我试过增加宽度和高度，也失败了。

注意：_base 是 React.Component

的包装器

代码如下：

import React, { PropTypes }    from 'react';
import _Base                   from '_Base';
import _                       from 'underscore';
import classNames              from 'classnames';

export default class SearchField extends _Base {
  static defaultProps = {
    name:          null,
    placeholder:   null,
    onSearch:      null,
    searchOnEnter: true,
    liveSearch:    false,
    delay:         250
  };

  static propTypes = {
    name:          PropTypes.string.isRequired,
    placeholder:   PropTypes.string,
    onSearch:      PropTypes.func,
    searchOnEnter: PropTypes.bool,
    liveSearch:    PropTypes.bool,
    delay:         PropTypes.number,
  };

  state = {
    __value: null
  };

  constructor(props) {
    super(props);
    let me = this;
    if(props.delay > 0){
      me.onKeyDown = _.debounce(me._onKeyDown, props.delay);
    } else {
      me.onKeyDown = me._onKeyDown;
    }
  }

  __onKeyDown(event) {
    event.persist();
    this.onKeyDown(event);
  }

  _onKeyDown(e) {
    var me = this
      , props = me.props
      , val   = me.refs.search.value
      ;

    me.setState({ __value: val });

    if(props.liveSearch ||
      (props.searchOnEnter && e.key === "Enter")) {
      me._onSearch(val);
      return;
    }
  }

  _clearSearch() {
    var me = this;

    me.refs.search.value = "";
    me.setState({ __value: "" });

    me._onSearch("");
  }

  _onSearch(val) {
    var me = this
      , props = me.props
      ;

    if(props.onSearch) {
      props.onSearch({ name: props.name, value: val });
    }
  }

  render() {

    return (
      <div className={classNames("search-field form-group has-feedback", this.props.className)}>
        <input
          ref            = {"search"}
          className      = "form-control"
          type           = "search"
          autoCapitalize = "none"
          autoComplete   = "off"
          autoCorrect    = "on"
          autoSave       = "true"
          autofocus      = "false"
          spellCheck     = "false"
          name           = {this.props.name}
          placeholder    = {this.props.placeholder}
          onKeyDown      = {this.__onKeyDown}
        />
        <i className="fa fa-times-circle cursor-pointer form-control-feedback"
           onClick = {this._clearSearch}
           title   = "Clear Search"
        />

      </div>
    );
  }
}

Answer 1

发生这种情况的原因是因为您的 _clearSearch 函数中没有正确的 this。您需要明确地绑定它。

在你的构造函数中，做

this._clearSearch = this._clearSearch.bind(this);

应该可以。如果您仍然面临这个问题，请告诉我们。

Answer 2

相同的代码对我来说工作正常，确保你没有任何元素覆盖在上面，并且没有 css 禁用鼠标事件，如 pointer-events: none

使用 fontawesome 时 onClick 不触发

onClick not firing when using fontawesome

javascript

onclick

font-awesome

reactjs