按钮 onClick return 内部 html 而不是 Chrome 浏览器中的值

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

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

Answer 2

e.target 会给你点击的最后一片叶子 DOM ，在你的例子中，可以是 <button /> 也可以是它的 children 之一，即 <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>

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

按钮 onClick return 内部 html 而不是 Chrome 浏览器中的值

Button onClick return inner html instead of value in Chrome Browser

javascript

cross-browser

reactjs