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

很容易。您可以定义一个新函数来立即调用它们。

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

然后，用它替换onMouseOver的内容。

onMouseOver={changeWidthAndHeight}

Answer 2

将它们合并为1个函数

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

或者您可以将这些样式变为变量，然后使用onMouseOver更新该样式。

Answer 3

像这样使用它：

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

onMouseOver React.js中有两个函数

3 个答案: