on在React中单击此返回undefined

Question

我首先想为我在React中的糟糕水平道歉，我是这个框架的绝对初学者。

我试图在单击渲染元素时触发一个简单的函数。

我希望单击时，该元素的背景属性变为蓝色。

我知道，在常规ES6中，实现这一点非常简单。然而，我的所有试验都没有在React中成功。我在这里请求你的宝贵帮助！

这是我的代码：

import React, { Component } from 'react';
import logo from './images/stellar.png';
function openMenu(machin){
console.log(machin);
machin.props.style.backgroundColor = 'blue';
}
class App extends Component {
render() {
return (
<div id="background">
<div className="navbar">
<div className="imgContainer" onClick={()=>{ openMenu(this) }}>
<img src={logo} alt="logo" />
</div>
<b>About</b>
</div>
</div>
);
}
}
export default App;

我做过的最相关的替代试验如下：

<div className="imgContainer" onClick={openMenu(this)}>
// Triggered function below ↓
function openMenu(){
console.log(this);
this.props.style.backgroundColor = 'blue';
}

我还尝试绕过代码中的道具(比如this.style.backgroundColor(，但没有得到显著的结果。

截至目前，错误消息如下：错误图像

非常感谢您的帮助！

提前感谢

Answer 1

虽然你可以"修复"；它通过使用点击处理程序中的事件来访问点击的元素：

<div className="imgContainer" onClick={(e)=>{ openMenu(e.target) }}>

这不是正确的React做事方式。将菜单是否打开的状态改为状态，并更改状态而不是使用DOM方法：

const logo = 'https://www.gravatar.com/avatar/65f22377d41ecf71a89602c73d4d9889?s=32&d=identicon&r=PG&f=1';
const App = () => {
const [open, setOpen] = React.useState(false);
return (
<div id="background" className={open ? 'open' : ''}>
<div className="navbar">
<div className="imgContainer" onClick={()=>{ setOpen(!open) }}>
<img src={logo} alt="logo" />
</div>
<b>About</b>
</div>
</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));

.open {
background-color: blue;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

(将className={open ? 'open' : ''}放入任何需要更改背景颜色的元素中(