按鈕onClick返回內部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

避免跨瀏覽器的問題，最好的解決辦法是將值傳遞給點擊處理函數，而不是事件本身。

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

Answer 2

你可能會發現你是什麼在這裏尋找：ReactJS SyntheticEvent stopPropagation() only works with React events?

Answer 3

e.target會給你點擊DOM的最後一頁，在你的例子中，可以是<button />，因爲它可以是它的一個子女，即<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>