有3个组成部分。第一个是名为A的父组件。其他组件是X和Y。
X是一个具有“保存”按钮的工具栏组件。 Y是一个Form组件,有一些输入(显然)。并且它们都被导入并在A中呈现。
所以我要做的是点击X中的Save按钮,我希望提交B中的Form。
提前致谢。
答案 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()