Question

我的主要组件中有以下渲染方法。我已将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>
    );
}

使用已转换的代码块进行更新

_react2.default.createElement(
                            'button',
                            { type: 'button', className: 'btn btn-default' },
                            _react2.default.createElement('img', { src: '/Content/images/LookupIcon.png', onClick: function onClick() {
                                    return console.log('lookup icon');
                                } })
                        )

Answer 1

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

onClick={this.onIconClick.bind(this)}

现在有用吗？

Answer 2

我遇到了同样的问题，我发现onClick没有传递给图像（使用react-dev-tools我可以以编程方式触发它），所以问题出在定义它的地方，所以改变从这里：

<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

嵌套的React组件的OnClick事件未使用firefox或ie11触发

2 个答案: