通点击父组件按钮调用子组件的方法
父组件：
import ChildComponent from './child';
export default class ParentComponent extends Component {
render() {
return(
)
}
onRefChild = (ref) => {
this.child = ref
}
clickParent = (e) => {
this.child.childMethods()
}
}
子组件：
export default class ParentComponent extends Component {
componentDidMount(){
this.props.onRefChild(this)
}
childMethods = () => alert('子组件被执行了')
render() {
return (我是子组件)
}
}
另外一种情况，子组件使用了 ‘rc-form’;
父组件：
import ChildComponent from './child'
class Index extends React.Component {
startCreat = () => {
// 获取到子组件的值
let values = this[`formRef`].getItemsValue();
}
render(){
return (
this[`formRef`] = form}/>
)
}
}
export default Index;
子组件：
import { createForm } from 'rc-form';
class ChildComponent extends React.Component {
// 父组件获取form内值
getItemsValue = () => {
const values= this.props.form.getFieldsValue();
return values;
}
render(){
const { getFieldProps } = this.props.form;
return (
)
}
}
export default createForm()(ChildComponent);
