onMouseOver中的兩個函數React.js

Question

render: function() { 

    return (
      <td> 
       <img src={this.props.image.path} width="40" height="40" id={this.props.image.id} 
       onMouseOver={()=>document.getElementById(this.props.image.id).height="80",()=>document.getElementById(this.props.image.id).width="80"} 
       onMouseOut={()=>document.getElementById(this.props.image.id).height="40",()=>document.getElementById(this.props.image.id).width="40"}/> 
      </td> 
     ); 
    } 

我想在onMouseOver時更改圖像大小，但只改變寬度。 如何在onMouseOver中使用兩個函數。謝謝。

Answer 1

這樣使用它：

onMouseOver={() => { 
    document.getElementById(this.props.image.id).height = "80"; 
    document.getElementById(this.props.image.id).width = "80"; 
    } 
} 

但最好使用功能

onMouseOver={this.someFunction} 

someFunction =() => { 
    document.getElementById(this.props.image.id).height = "80"; 
    document.getElementById(this.props.image.id).width = "80";  
} 

Answer 2

簡單的一個。你可以定義一個新的函數來一次調用它們。

function changeWidthAndHeight() { 
    document.getElementById(this.props.image.id).height="80" 
    document.getElementById(this.props.image.id).width="80" 
} 

然後，用它替換onMouseOver的內容。

onMouseOver={changeWidthAndHeight} 

Answer 3

將它們合併爲1個功能

onMouseOver={()=> { 
    let obj = document.getElementById(this.props.image.id); 
    obj.height="80"; 
    obj.width="80"; 
}} 

或者你也可以讓那些風格，那麼一個變量更新，使用onMouseOver。