Button onClick return inner html instead of value in Chrome Browser

Question

I have different behavior on firefox and chrome for the bellow code, and i think firefox is more correct.

firefox will print on the console:

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

while chrome will print this:

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

here is my code:

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

Abdennour TOUMI · Answer 1 · 2017-02-09T19:24:54.940

e.target will give you the last leaf of clicked DOM , in your example , can be <button /> as can be one of its children namely <i />.

In the following example , try :

to click at the corner of button e.target === button
to click in the middle of the 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>

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

You would probably find what you are looking for here: ReactJS SyntheticEvent stopPropagation() only works with React events?

edited May 23 '17 at 12:00

Community

1
1

answered Feb 09 '17 at 18:52

melvinv

134
5

same behaviour still? – melvinv Feb 09 '17 at 19:01

score 0 · Accepted Answer · answered Feb 21 '17 at 13:13

to avoid cross browser issues, best solution is to pass the value to the click handler function instead of the event itself.

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

Button onClick return inner html instead of value in Chrome Browser

3 Answers3