onClickはfontawesomeを使用しているときに発砲しません

Question

私は反応コンポーネントSearchFieldを持っています。これは入力を囲むラッパーです。私はクリックしたときに入力ボックスをクリアするためにfontawesome（x）を取得しようとしていますが、onClick to fireを取得しようとする試みはすべて失敗しました。

親のdivに切り取って貼り付けると、onClickが発生します。 要素を要素に変更しても、それでも失敗します。 Iveはクロムツールを使用して手動で入力の外側に配置しようとしましたが、それでも発射に失敗しました。 Iveは幅と高さの増加を試みましたが、これも失敗します。

注：

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

同じコードは私のために正常に動作し、あなたが上にオーバーレイの任意の要素を持っていないことを確認し、それはあなたがjsfiddleか何かでこれを再現でしpointer-events: none

Answer 2

正しいthisがあなたの_clearSearch関数内使用できないため、これが起こっている理由は次のとおりです。_baseはここにコードがReact.Component

のラッパーですされています。明示的にバインドする必要があります。あなたのコンストラクタ関数で

、それが動作するはず

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

を行います。あなたがまだ問題に直面している場合はお知らせください。