onClick 这个在 React 中返回 undefined

Posted 2023-02-23

【中文标题】onClick 这个在 React 中返回 undefined

【英文标题】：onClick this returning undefined in React

【发布时间】：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  />
            </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

非常感谢任何帮助！

在此先感谢

【参考方案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  />
          </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' : '' 放入需要更改背景颜色的任何元素中）