Question

在这里，我有父母的沟通，工作正常。

 var ParentComponent = React.createClass({
        update: function() {
            console.log("updated!");
        },
        render: function() {
          <ChildComponent callBack={this.update} />
        }
    })

    var ChildComponent = React.createClass({
    preupdate: function() {
        console.log("pre update done!");
    },
    render: function() {
      <button onClick={this.props.callback}>click to update parent</button>
    }
})

如何在按钮Onclick事件期间调用父回调方法之前调用子组件中的preupdate函数。

Answer 1

您可以将preupdate函数作为单击处理程序调用。然后，当它完成时，它可以调用回调。

var ParentComponent = React.createClass({
    update: function() {
        console.log("updated!");
    },
    render: function() {
      <ChildComponent callBack={this.update} />
    }
})

var ChildComponent = React.createClass({
    preupdate: function() {
        console.log("pre update done!");
        this.props.callback()
    },
    render: function() {
        <button onClick={this.preupdate.bind(this)}>click to update parent</button>
    }
})

Answer 2

使用以下内容：

<button onClick={(args)=>{this.preupdate(args);this.props.callback(args);}>click to update parent</button>

您还需要重新定义preupdate函数，如下所示：

preupdate: ()=> {
        console.log("pre update done!");
    }

以便在调用此方法时保留this上下文。

Answer 3

有关反应钩子的信息，请参阅以下解决方案。

ParentClass

function ProfilePage() {

const successCallBackData = (data) => {
   console.log(data)// can get callback data here
}
return (
    <>
      <AlertModal callBack={successCallBackData} /> 
    </>
);
}

export default ProfilePage;

ChildClass

const AlertModal = (props) =>{

const goBack = () => {
    props.callBack('hello');// can pass callback data here
}
return (
    <>
      <div>
      <Button className="btn-round" color="danger"   onClick={goBack}>
        Go Back
            </Button>
      </div>
    </>
);
}

export default AlertModal;

来自子组件的回调函数

3 个答案: