onClick not firing при использовании fontawesome

Question

У меня есть компонент-компонент для поиска, который является оберткой вокруг ввода. Я пытаюсь получить fontawesome (x), чтобы очистить поле ввода при нажатии, но все попытки получить onClick для запуска потерпели неудачу.

Если я вырезал и вставлял родительский div, загорается onClick. Если я изменяю элемент на элемент, он все равно терпит неудачу. Ive попытался вручную позиционировать его вне входа, используя хромированные инструменты, и он все еще не срабатывает. Ive пытался увеличить ширину и высоту, что также не удается.

Примечание: _Образы базовой является оберткой 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

же код работает отлично для меня, убедитесь, что у вас нет каких-либо элементов, наложенных на вершине, и что Тереза ​​нет CSS отключающего события мыши, как у pointer-events: none

Answer 2

Причина это происходит потому, что правильно this не доступна внутри функции _clearSearch. Вам нужно привязать его явно.

В функции конструктора, сделать

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

он должен работать. Сообщите нам, если вы все еще сталкиваетесь с проблемой.