Javascript 嵌套的React组件的OnClick事件未使用Firefox或IE11触发

在我的主组件中有以下渲染方法。我将onClick事件附加到嵌套在另一个组件中的img元素，并调用主组件的函数。这可以通过Chrome和Edge实现，但不能通过Firefox或IE11实现。我需要它为所有人工作

我如何设置它，以便我可以为所有人连接我的onIconClick事件

class LookupFieldItem extends React.Component {
   constructor(props) {
     super(props);
     this.onIconClick = this.onIconClick.bind(this);
    }
    onIconClick(e) {
     ......
    }
    return (
        <div>
            <div>
                <TextInput field={field} className={_className} inputRef={inputRef} fieldMetadata={fieldMetadata} value={value} onChange={onChange} onKeyDown={this.onKeyDown}>
                  <div className="input-group-btn">
                    <button type="button" className="btn btn-default">
                      <img src='/Content/images/LookupIcon.png' onClick={this.onIconClick} />                                                
                    </button>
                  </div>
                </TextInput>
            </div>
        </div>
    );
}

---

让我们先从最简单的事情开始

onClick={this.onIconClick.bind（this）}

---

现在可以用了吗？

让我们先从最简单的事情开始

onClick={this.onIconClick.bind（this）}

---

它现在可以工作了吗？

我也遇到了同样的问题，我发现

onClick

没有被传递到映像（使用react-dev工具，我可以通过编程方式触发它），所以问题出在定义它的地方，因此更改如下：

<button type="button" className="btn btn-default">
    <img src='/Content/images/LookupIcon.png' onClick={this.onIconClick} />                                                
</button>

为此：

<button type="button" className="btn btn-default" onClick={this.onIconClick}>
    <img src='/Content/images/LookupIcon.png' />                                                
</button>

这不是一个绑定问题，它看起来像是一些预定义的道具正在从按钮发送下来，如果它没有定义

---

我的问题是一样的，不同的是我包装了一个

Glyphicon

我遇到了同样的问题，我发现

onClick

没有被传递到映像（使用react-dev工具，我可以通过编程触发它），所以问题出在定义它的地方，因此更改如下：

<button type="button" className="btn btn-default">
    <img src='/Content/images/LookupIcon.png' onClick={this.onIconClick} />                                                
</button>

为此：

<button type="button" className="btn btn-default" onClick={this.onIconClick}>
    <img src='/Content/images/LookupIcon.png' />                                                
</button>

这不是一个绑定问题，它看起来像是一些预定义的道具正在从按钮发送下来，如果它没有定义

---

我的问题是一样的，不同的是我包装了一个

Glyphicon

不，它不工作。我应该编辑代码以显示我确实在构造函数this.onIconClick=this.onIconClick.bind（this）中绑定了该函数；是 啊谢谢如果您尝试

onClick={（）=>console.log（'clicked'）}

，会怎么样。这行得通吗？我打赌事件应该触发，它就是不能不触发，如果它触发了，那么下一个问题-你的事件处理程序中有什么？谢谢，谢谢，真的没什么特别的。但是等一下，包装问题区域的TextInput组件是什么？你确定它没有拦截事件吗？如果你把TextInput注释掉了，只留下里面的东西怎么办..不，它不起作用。我应该编辑代码以显示我确实在构造函数this.onIconClick=this.onIconClick.bind（this）中绑定了该函数；是 啊谢谢如果您尝试

onClick={（）=>console.log（'clicked'）}

，会怎么样。这行得通吗？我打赌事件应该触发，它就是不能不触发，如果它触发了，那么下一个问题-你的事件处理程序中有什么？谢谢，谢谢，真的没什么特别的。但是等一下，包装问题区域的TextInput组件是什么？你确定它没有拦截事件吗？如果你把TextInput注释掉，只留下里面的东西会怎么样？你找到解决方案了吗？@monkeyjums事实上我在代码中找到了一个解决方案，可能对你有效。你找到了解决方案吗？@monkeyjums事实上我在代码中找到了一个解决方案，可能对你有效。不仅对react，在按钮或链接元素中使用一些onclick事件处理程序通常是个坏主意。这些元素有自己的现成事件处理程序，并在单击它们时执行默认操作。不仅对于react，在按钮或链接元素中使用一些onclick事件处理程序通常不是一个好主意。这些元素有自己的现成事件处理程序，并在单击它们时执行默认操作。