如何在孩子的 function 中运行作为道具传递的 function？

Question

如标题-在父组件中，我将 function 作为道具传递给子组件，我想在子组件中运行此 function，但在子组件的 ZC1C425268E68385D1AB5074C17A94F1 中运行。

//parent component
<div>
    <Child myFunction={this.myFunction} />
</div>

并在子组件中创建新的 function

//child component
    newFunction = () => {
        //someNewCode
        this.props.myFunction();
    }
    <button onClick={this.newFunction}>click me</button>

但它不起作用。 问题出在哪里？

Answer 1

以下应该工作。

也许this.myFunction不是箭头 function 并且您忘记绑定它。

 class Parent extends React.Component { myFunction = () => { console.log("Luke, I am your father"); }; render() { return <Child myFunction={this.myFunction} />; } } class Child extends React.Component { newFunction = () => { this.props.myFunction(); } render() { return <button onClick={this.newFunction}>click me</button>; } } ReactDOM.render(<Parent />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'></div>