reactjs - 如何在React中使用useState Hook调用Parent函数？

Question

理想的结果是在单击列表中的项目时显示字符串。

这是根组件。

const App = () => {
  const [click, setClick] = useState(null);
  const handleClick = name => {
    setClick(name);
  };
  return (
    <div>
      <Parent handleClick={handleClick} />
      {click && <p>{click} is clicked.</p>}
    </div>
  );
};

和父组件。

const Parent = ({ handleClick }) => (
  <div>
    <Child
      name="First Item"
      handleClick={handleClick("First Item is Clicked!")}
    />
    <Child
      name="Second Item"
      handleClick={handleClick("Second Item is Clicked!")}
    />
    <Child
      name="Third Item"
      handleClick={handleClick("Third Item is Clicked!")}
    />
  </div>
);

和子组件。

const Child = ({ name, handleClick }) => <li onClick={handleClick}>{name}</li>;

此外，代码沙箱 link .

我只是想知道为什么结果永远不会因点击而改变。

Answer 1

问题是您没有将函数传递给handleClick，而是传递来自父级的评估值。您的代码必须是

import React from "react";
import Child from "./Child";

const Parent = ({ handleClick }) => (
  <div>
    <Child
      name="First Item"
      handleClick={() => handleClick("First Item is Clicked!")}
    />
    <Child
      name="Second Item"
      handleClick={() => handleClick("Second Item is Clicked!")}
    />
    <Child
      name="Third Item"
      handleClick={() => handleClick("Third Item is Clicked!")}
    />
  </div>
);

export default Parent;

Working demo