需求：由于业务需要，表单过大的问题，我把表单和提交按钮分开成了两个组件，如图：
需求草稿
涉及知识点：父子通信，ref的使用
解决思路：
1.点击按钮时告知父级这一行为：
按钮组件
import { Button } from 'antd';
import style from './Footer.less'
export default class Footer extends React.Component {
handleSubmitForm() {
this.props.handleSubmitForm()
}
render() {
return <div className={style['footer']}>
<Button>取消</Button>
<Button type="primary" onClick={this.props.handleSubmitForm} >提交</Button>
</div>
}
}
传送门：https://www.kancloud.cn/ppyy321/react/273596
2.父级接收子组件传递的信息
import React from 'react';
import Footer from './Footer' //我是按钮组件
export default class AddTenement extends React.Component {
// 我是触发子级点击事件
handleSubmitForm() {
console.log('我是能打印出来表示父级接收到我的信息了')
}
render() {
return <React.Fragment>
<Footer handleSubmitForm={this.handleSubmitForm.bind(this)} />
</React.Fragment>
}
}
- 先在父组件定义一个属性bindRef传入表单组件TenementDetail中，
//父组件
import React from 'react';
import TenementDetail from './TenementDetail' //表单组件
import Footer from './Footer'
export default class AddTenement extends React.Component {
bindRef = ref => { this.child = ref }
render() {
return <React.Fragment>
<TenementDetail triggerRef={this.bindRef} />
<Footer handleSubmitForm={this.handleSubmitForm.bind(this)} />
</React.Fragment>
}
}
子组件接收到这个方法后把this回传给父组件，this.child是父组件接收到的this挂载到child上面，这样子this.child就是子组件的this，如此就能直接操作子组件了
//子组件
import React from 'react';
export default class TenementDetail extends React.Component {
componentDidMount() {
this.props.triggerRef(this)
}
}
传送门：https://juejin.im/post/5c26137d5188257dc54af75c
4.最后一步：我们就能在父组件里直接操作子组件的提交事件啦
import React from 'react';
import TenementDetail from './TenementDetail'
export default class AddTenement extends React.Component {
// 我是触发子级点击事件
handleSubmitForm() {
this.child.handleSubmit()
}
}
这是我的解决方法，写的有点乱，如果有更好的解决方法，欢迎分享~
