ボタン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ながら：

<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

クロスブラウザの問題を避けるために、最善の解決策ではなく、イベント自体のクリックハンドラ関数に値を渡すことです。

Answer 2

あなたはおそらく、あなたが何であるかを見つけるだろう。ここ

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

は私のコードです探している： ReactJS SyntheticEvent stopPropagation() only works with React events?

Answer 3

e.targetあなたの例では、<button />のようにクリックしたDOMの最後の葉を与えます。すなわち、<i />です。次の例では

、試してみてください。

1. をボタンe.targetのコーナーでクリックする=== button

2. ボタン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>