按钮onClick在Chrome浏览器中返回内部html而不是值

Question

我对firefox和chrome的下列代码有不同的行为，我认为firefox更正确。

firefox将打印在console：

上

<button value="2" class="mdl-button mdl-js-button mdl-button--icon" data-upgraded=",MaterialButton">

而chrome会打印出来：

<i class="material-icons">star_border</i>

这是我的代码：

<button value={props.value} className="mdl-button mdl-js-button mdl-button--icon" onClick={(e) => {
    e.preventDefault();
    props.onClick(e);
}}>
    <i className="material-icons">{props.icon}</i>
</button>


onClick(e) {
    console.log(e.target);
}

Answer 1

na = c("", NA, "-")将为您提供点击DOM的最后一页，在您的示例中，可以是e.target，也可以是其中一个子项<button />。

在以下示例中，请尝试：

1. 点击按钮e.target === <i />

的一角

2. 点击按钮中间的e.target === button



i

class App extends React.Component{

  
  
  render() {
    return (
      <button value={this.props.value} className="mdl-button mdl-js-button mdl-button-icon" onClick={(e) => {
    e.preventDefault(); 
    this.props.onClick(e);
}}>
    <i className="material-icons">{this.props.icon}</i>
</button>
    )
  }
}


ReactDOM.render(<App icon="click me" onClick={(e) => console.log(e.target)} />, document.querySelector('#app'))

.mdl-button {
  font-size: 15px;
  width: 200px;
  height:  40px;
}

Answer 2

您可能会在这里找到您要找的内容：ReactJS SyntheticEvent stopPropagation() only works with React events?

Answer 3

为避免跨浏览器问题，最佳解决方案是将值传递给点击处理函数而不是事件本身。

<button value={props.value} className="mdl-button mdl-js-button mdl-button--icon" onClick={(e) => {
    e.preventDefault();
    props.onClick(props.value);
}}>
    <i className="material-icons">{props.icon}</i>
</button>


onClick(value) {
    console.log(value);
}