Ad

React Child Component Is Not Firing On Click Event

- 1 answer

I'm trying to make a tag-suggest input field. I'm trying to understand why this code doesn't work, as it can be applied to any number of cases.

FYI: ReactComponent is just a helper class I implemented that contains few methods like _bind etc.

class TagSuggestInput extends ReactComponent {
constructor(){
    super();
    this._bind('handleSelectionClick', 'handleRemoveTag', 'addNewTag', 'render');
    this.state = {
        suggestedOptions: [],
        tagListTo: []
    };
}

addNewTag(selectedIndex){
    var _this = this,
        tag= _this.state.suggestedOptions[selectedIndex].tag,
        tagList = _this.state.tagListTo;

    if($.inArray(email, tagList) == -1){
        _this.setState({tagListTO: tagList.push(tag)});
    }

}

handleRemoveTag(tag){
    var _this = this;

   // Remove tag code goes here. This is not the problem part
}

handleSelectionClick(selectedIndex, e){
    var _this = this;
    _this.addNewTag(selectedIndex);
    // other stuff here

}

render() {
    var _this = this;
    return (
        <div className="tagitos">
            {_this.state.tagListTo.map(function(item, index){
                return  (
                    <span key={index} >
                        <Tag data={item} onRemove={_this.handleRemoveTag.bind(_this)} />
                    </span>
                );
            })}
            <input className="tag-input" ref="input"></input>
            <ul>
                {_this.state.suggestedOptions.map(function(item, index){
                    return  (
                        <li key={index}
                            onClick={_this.handleSelectionClick.bind(_this, index)}
                        >
                            <OptionComponent data={item} index={index}/>
                        </li>    
                    );
                })}  
            </ul>
        </div>          
    );
}
}

Child component

class Tag extends ReactComponent{
constructor(){
    super();
    this._bind('render', 'removeFromList');
}

removeFromList(tag){
    var _this = this;

    _this.props.onRemove(tag);
}

render(){
    var _this = this;
    return(
        <span className="tag-element">
            <div>{_this.props.data}</div>
            <div onClick={_this.removeFromList(_this.props.data)} className="tag-closeButton">&times;</div>
        </span>  
    );
}
}

I want to remove the tag by clicking on the tag X button, not on the tag itself, otherwise I could have just made the entire code in the parent scope like I did with options.

Workflow: Options are generated from back-end, as autocomplete, listed below the input field in the parent. When option is selected it generates a tag. So far so good!

BUT: the code for removing the tag is automatically called and tries to remove it. Since I've removed it the tag stays, but nothing happens on 'X' click. As if onCLick event is not bound.

Function removeFromList is not called, but it is called when component is added to the view. Why? How to prevent this? My guess is that by solving this I would solve the onClick problem also.

Ad

Answer

It doesn't work because you do not bind function to onclick. You only run it once on each render You may write something like this

removeFromList(){
    var _this = this;
    var tag = _this.props.data;
    _this.props.onRemove(tag);
}

...

 <div onClick={_this.removeFromList}></div>
Ad
source: stackoverflow.com
Ad