react中子组件的回调函数

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>
    }
})

在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

react钩子可以参考下面的解决方案。

• ParentClass

ProfilePage;

• ChildClass ProfilePage() { const successCallBackData = ( data ) => { console.log(data)//可以在此处获取回调数据} return ( <> )；}导出默认数据

const AlertModal = (props) =>{ const goBack = () => { props.callBack('hello' )；//可以在这里传递回调数据} return ( <>返回 )；}导出默认AlertModal;

Answer 3

使用以下内容：

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

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

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

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