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

【问题标题】：Button onClick return inner html instead of value in Chrome Browser按钮 onClick 返回内部 html 而不是 Chrome 浏览器中的值
【发布时间】：2017-02-21 21:13:07
【问题描述】：

对于下面的代码，我对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);
}

【问题讨论】：

标签： javascript reactjs cross-browser

【解决方案1】：

e.target 将为您提供点击 DOM 的最后一片叶子，在您的示例中，可以是 <button />，也可以是它的一个子节点，即 <i />。

在下面的例子中，试试：

点击按钮的一角?? e.target === button
点击按钮中间的?? e.target === 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" ></div>

【讨论】：

很好的解释 +1 :)

【解决方案2】：

你可能会在这里找到你要找的东西：ReactJS SyntheticEvent stopPropagation() only works with React events?

【讨论】：

还是一样的行为吗？

【解决方案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);
}

【讨论】：