onClick 这个在 React 中返回 undefined答案

【问题标题】：onClick this returning undefined in ReactonClick 这个在 React 中返回 undefined
【发布时间】：2021-03-30 00:00:19
【问题描述】：

我首先要为我在 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';
}

我也尝试在我的代码中绕过 props（直接像 this.style.backgroundColor），但没有显着的结果。

截至目前，错误信息如下：Error Image

非常感谢任何帮助！

在此先感谢

【问题讨论】：

标签： reactjs class ecmascript-6 components

【解决方案1】：

虽然您可以通过使用来自点击处理程序的事件来“修复”它以获取被点击的元素：

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

这不是正确的 React 做事方式。将菜单是否打开的状态改为state，改变状态而不是使用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' : ''} 放入需要更改背景颜色的任何元素中）

【讨论】：