使用fontawesome時，onClick不會觸發

我有一個反應組件SearchField，它是一個輸入包裝。我試圖讓一個fontawesome（x）在點擊時清除輸入框，但所有嘗試使onClick發生失敗。使用fontawesome時，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> 
    ); 
    } 
}

來源

2016-08-24 Mr. MonoChrome

你能在一個的jsfiddle什麼重現呢？這裏有一個你可以分叉的基礎（當點擊圖標時onClick觸發）：https：//jsfiddle.net/saeq0nz0/ – tobiasandersen

相同的代碼工作對我很好，請確保你沒有覆蓋在上面的任何元素，而且那裏有沒有CSS禁用鼠標事件就像一個pointer-events: none

來源

2016-08-24 21:00:28 StackOverMySoul

這正是css指針事件：沒有任何東西阻止它，非常感謝你。 –

-1

出現這種情況的原因是因爲正確的this不支持您_clearSearch函數中。你需要明確地綁定它。

在你的構造函數，做

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

它應該工作。讓我們知道你是否仍然面臨這個問題。

來源

2016-08-24 20:52:30 nitte93user3232918

我不認爲就是這樣。上下文在這裏不會改變，所以'this'應該指向SearchField組件。 – tobiasandersen

在ES6中，React.Component不會自動將方法綁定到自身。你需要在構造函數中明確地綁定它們。在你的jsfiddle console.log（這個）你會知道的。 https://jsfiddle.net/saeq0nz0/1/ – nitte93user3232918

使用fontawesome時，onClick不會觸發

回答

相關問題