React 子组件不会在点击事件时触发

Question

我正在尝试制作标签建议输入字段。我试图理解为什么这段代码不起作用，因为它可以应用于任何数量的案例。

仅供参考：ReactComponent 只是一个帮手 class 我实现的它包含一些像 _bind 等方法

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>          
    );
}
}

子组件

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>  
    );
}
}

我想通过点击标签 X 按钮而不是标签本身来删除标签，否则我可以像使用选项一样在父范围内制作整个代码。

工作流程：选项是从后端生成的，作为自动完成，列在父项的输入字段下方。选择选项后，它会生成一个标签。到目前为止一切顺利！

但是：删除标签的代码会自动调用并尝试将其删除。因为我已经删除了它，所以标签仍然存在，但是 'X' 点击时没有任何反应。好像没有绑定onCLick事件。

函数removeFromList 未被调用，但在将组件添加到视图时调用。为什么？如何防止这种情况？我的猜测是，通过解决这个问题，我也可以解决 onClick 问题。

Answer 1

它不起作用，因为您没有将函数绑定到 onclick。你只运行它在每个渲染上一次你可以这样写

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

...

 <div onClick={_this.removeFromList}></div>

React 子组件不会在点击事件时触发

React child component is not firing on click event

javascript

reactjs

react-jsx