如何将事件状态发送到 React 中 child 组件的 child？

Question

我想 console.log 单击 child 中的按钮 child，但控制台已登录页面重新加载并且不适用于 onClick，怎么办我解决这个问题？

Parent.jsx :

import Child from "./child";

const Parent = () => {
  const alertHandler = (id) => {
    // alert("Hello: " + id);
    console.log("Hello world: " + id);
  };
  return (
    <div>
      This is PARENT :
      <Child alHandler={alertHandler} />
    </div>
  );
};

export default Parent;

Child:

import ChildOfChild from "./ChildOfChild";

const Child = (props) => {
  return (
    <div>
      This is child
      <ChildOfChild alHandler={props.alHandler} />
    </div>
  );
};

export default Child;

Child Child:

const ChildOfChild = (props) => {
  return (
    <div>
      Child Of Child
      <br />
      <button onClick={props.alHandler(5)}>Click</button>
    </div>
  );
};

export default ChildOfChild;

Answer 1

  const ChildOfChild = (props) => {
    return (
      <div>
        Child Of Child
        <br />
        <button
        //onClick={props.alHandler(5)}  <---this is called during rendering

        //↓this is called only when u click it
          onClick={() => {        
            props.alHandler(5);    
          }}  
        > 
          Click
        </button>
      </div>
    );
  };

  export default ChildOfChild;

Answer 2

请试试这个。

const ChildOfChild = (props) => {
  return (
    <div>
      Child Of Child
      <br />
      <button onClick={(e) => {        
            props.alHandler(5);    
          }>Click</button>
    </div>
  );
};

export default ChildOfChild;

如何将事件状态发送到 React 中 child 组件的 child？

How send Event state to child of child component in React?

components

state

nested

reactjs