为什么 onClick 函数在 jsx 内部起作用，而在 return 语句之外不起作用

Question

为什么 onClick 函数在 jsx 内部起作用而在 return 语句之外不起作用

import React, { useState } from "react";
    
function Menu({ items }) {
      const [displayChildren, setDisplayChildren] = useState({});
      console.log(displayChildren);
    
      return (
        <ul>
          {items.map((item) => {
            return (
              <li key={item.title}>
                {item.title}{" "}
                {item.children && (
                  <button
                    onClick={() => {
                      setDisplayChildren({
                        ...displayChildren,
                        [item.title]: !displayChildren[item.title],
                      });
                    }}
                  >
                    {displayChildren[item.title] ? "-" : "+"}
                  </button>
                )}
                {displayChildren[item.title] && item.children && (
                  <Menu items={item.children} />
                )}
              </li>
            );
          })}
        </ul>
      );
    }
    export default Menu;

但是当我在外部设置 onclick 函数时，它什么也没做

  const buttonHandler = (item) => {
    setDisplayChildren({
      ...displayChildren,
      [item.title]: !displayChildren[item.title],
    });
  };

Answer 1

const buttonHandler = (item) => // etc

这个函数期望传入一个item，但是当点击发生时，react会传入点击事件对象。它不知道该项目。所以你需要通过创建另一个函数自己传递项目：

<button onClick={() => buttonHandler(item)}>

为什么 onClick 函数在 jsx 内部起作用，而在 return 语句之外不起作用

Why the onClick function works inside the jsx and don't work outside the return statement

onclick

reactjs