react在父组件中操作子组件中的方法

//这个写法适用于保存/取消按钮在父组件中而表单内容在子组件，编辑/修改完之后在父组件点击保存/取消表单的内容。并且，子组件要是类组件，不能是函数组件

</*-----------------------------------------------------------*/>

// 父组件

this.state = {

　　refMethod ： null;   // 也可以在全局let refMethod = null 

}

handleRef = (ref: any) => { // 函数（hooks）写法为    const   handleRef   = (ref: any) => {  refMethod = ref;  }

　　this.setState({  refMethod: ref  })

}

changeChild = () => { //这里的changeChild（）是父组件里的方法，例如保存/取消

　　refMethod?.handleSave?.()  //  ?.   是为了判断  refMethod  下面有没有  handleSave  可以理解为  if（refMethod）{ handleSave() }

}

 

//html

return (

　　<Childer ref={handleRef} ></Childer>

)

 

</*--------------------------------下面是子组件-----------------------------------------*/>

 

//在子组件的props中定义父组件中的ref

interface ChilderProps {    //  这里为ts写法

　　ref: (ref: any) => void;

}

 

class ChilderComponents extends React.Component<ChilderProps, ChilderState> {

　　constructor(props: any) {

　　　　super(props)

　　　　this.state = {

　　　}

　　}

　　componentDidMount = () => {

　　　　this.props.ref?.(ChilderComponents);   　　//把整个子组件赋值给  ref  就可以在父组件中操作子组件的方法了

　　}

}