在兄弟组件Reactjs

时间:2017-06-09 06:37:11

标签: forms reactjs components submit

有3个组成部分。第一个是名为A的父组件。其他组件是X和Y。

X是一个具有“保存”按钮的工具栏组件。 Y是一个Form组件,有一些输入(显然)。并且它们都被导入并在A中呈现。

所以我要做的是点击X中的Save按钮,我希望提交B中的Form。

提前致谢。

1 个答案:

答案 0 :(得分:1)

您可以与孩子的父母沟通,反之亦然。

您需要做的是将组件X中的处理程序传递给组件X,然后使用refs在此处理程序中,您可以访问子组件表单并触发提交,如

A:

class A extends React.Component {
    constructor(props) {
        super(props);
    }
    buttonSubmit = () => {
           this.Yform.childForm.submit()

    }
    render() {
          return <div>
                <X triggerSubmit={this.buttonSubmit}/>
                <Y ref={(form) => this.Yform = form}/>
           </div>
    }
}

X

class X extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
          return <div>
                <button onClick={() => this.props.triggerSubmit()}>Submit</button>
           </div>
    }
}

Y:

class Y extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
          return <div>
                <form ref={(childForm) => {this.childForm = childForm}}>
                    ...
                </form>
           </div>
    }
}

如果您使用Redux,则需要调用onSubmit,如

  this.YForm.getWrappedInstance().submit()