Question

下面是我在React Hooks中的代码：

我有三个React功能组件Parent，Child1，Child2。我想单击Child2组件中的一个按钮，它应该在Parent组件中调用一个函数。如何实现呢？

function Child2({Open, close, events, onEvent}) {

const passEventToParent = () {
// callback to parent using onEvent
}

<Button onClick={passEventToParent}>

}

function Child1({open, close, events, onEvent}) {
<Child2 />

}

function Parent({open, close, events, onEvent}) {

// I want call below function based on the button clicked in Child2 React functional component
runEvent();

<Child1 />

}

Answer 1

切换状态挂钩将是最简单的设置，可以很容易地将其作为触发事件的道具来传递。

const [toggleChild, setToggleChild] = useState(false);

如果单击了按钮（将其放入onClick事件中），请使用setToggleChild，并在return语句中使用三元运算符来显示Child2 {toggleChild ? <Child2 /> : null}您可以根据需要将状态道具传递给孩子。

Answer 2

将方法传递给第一个孩子，然后将其从第一个孩子传递给第二个孩子。

像下面一样

免费输入，忽略错字

const Parent = () => {
  const runEvent = () => {
    //Do something
  };
  return (
           <Child1 changeFunc={runEvent} />        
  );
};



export default function Child1(props) {
  return (  
            <Child2 changeFn={props.changeFunc} />
          )

}

const Child2 = props => {
  function handleSubmit(event) {    
    props.changeFn();   // calling the method

  }
  return (    
      <button onClick={handleSubmit}>                
        </button>    
  )
}

Answer 3

下面的示例演示如何通过组件传递事件。这个例子很简单，但是如果您有任何疑问，请告诉我。

如果您不想处理“链接”事件，而不必通过组件传递它们，则可以深入研究Context API或React Redux，因为它们都具有“全局”状态和处理程序（也称为化简器）的概念。

const { render } = ReactDOM;

/**
 * Child2
 */
function Child2({ Open, close, events, onChild2Event }) {
  const handleEvent = event => {
    // Pass event to caller via the onChild2Event prop.
    // You can do something with the event, or just pass it.
    console.log("1. Event fired in Child2! Doing something with event before passing..");
    onChild2Event(event);
  };

  return <button onClick={handleEvent}>Child 2 Button</button>;
}


/**
 * Child1
 */
function Child1({ open, close, events, onChild1Event }) {
  const handleEvent = event => {
    // Pass event to caller via the onChild1Event prop.
    // You could so something with the event or just pass it again.
    console.log("2. Event fired in Child1! Doing something with event in Child1..");
    onChild1Event(event);
  };

  return <Child2 onChild2Event={handleEvent} />;
}


/**
 * Parent
 */
function Parent({ open, close, events }) {
  // ~~ This is the "final function" you wish to invoke when Child2 button is clicked ~~
  const functionToInvokeInParent_WhenChild2ButtonIsClicked = () => {
    console.log("   -- I am the final function you wish to invoke in Parent, when Child2 button is clicked!");
  }
  
  const handleEvent = event => {
    // Handle event in Parent which originated from Child2
    console.log("3. **Handling event in Parent! About to invoke the function you wish to call in Parent:**");
    functionToInvokeInParent_WhenChild2ButtonIsClicked();
  };

  return (
    <div>
      <p>Open your console, then click the button below.</p>
      <Child1 onChild1Event={handleEvent} />
    </div>
  );
}

render(<Parent />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

如何使用React Hooks从子组件onClick（）触发父组件中的事件？

3 个答案: