Javascript React子组件未在单击事件时触发

我正在尝试创建一个标记建议输入字段。我试图理解为什么这段代码不起作用，因为它可以应用于任何数量的情况

仅供参考：ReactComponent只是我实现的一个助手类，它包含一些方法，如_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标记SuggestInput组件{
构造函数（）{
超级（）；
此.u绑定（'handleSelectionClick'，'handleRemoveTag'，'addNewTag'，'render'）；
此.state={
建议选项：[]，
tagListTo:[]
};
}
addNewTag（选定索引）{
var_this=这个，
tag=\u this.state.suggestedOptions[selectedIndex].tag，
标记列表=_this.state.tagListTo；
如果（$.inArray（电子邮件、标记列表）=-1）{
_this.setState（{tagListTO:tagList.push（tag）}）；
}
}
手柄拆卸标签（标签）{
var_this=这个；
//删除标记代码在这里。这不是问题所在
}
无手柄选择单击（选择索引，e）{
var_this=这个；
_此.addNewTag（selectedIndex）；
//这里还有其他东西
}
render（）{
var_this=这个；
返回(
{u this.state.tagListTo.map（函数（项，索引）{
返回(
);
})}

{u this.state.suggestedOptions.map（函数（项，索引）{
返回(


);
})}  

);
}
}

子组件

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

class标记扩展了组件{
构造函数（）{
超级（）；
这个。_bind（'render'，'removeFromList'）；
}
removeFromList（标记）{
var_this=这个；
_此.props.onRemove（标记）；
}
render（）{
var_this=这个；
返回(
{{u this.props.data}
&时代；
);
}
}

我想通过单击TagX按钮来删除标记，而不是标记本身，否则我可以像使用选项一样在父范围中生成整个代码

工作流：从后端生成选项，如“自动完成”，列在父级中输入字段下方。选择该选项后，将生成一个标记。到目前为止还不错

但是：删除标记的代码会自动调用并尝试删除它。因为我已经移除了它，所以标签保持不变，但是在“X”点击时什么也没有发生。好像onCLick事件没有绑定

---

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

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

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

您也可以共享您的ReactComponent组件吗？与此无关，只需扩展React.component并添加帮助器方法，尝试减少代码，因为有很多itI已经这样做了，请检查子（标记）组件的呈现，有onClick绑定，我马上传递参数。你是说这是不可能的吗？事实证明这正是问题所在。因此，为了传递参数，我需要显式地执行do.bind（params）以防止调用该函数

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