React父组件触发子组件方法

目录

一、子组件定义方法（类组件）

二、父组件触发子组件方法

一、子组件定义方法（类组件）

import React, { Component } from '@alipay/bigfish/react';
import { Tabs, Empty, Input } from '@alipay/bigfish/antd';

class CommunicationRecord extends Component {
  constructor(props) {
    super(props);
    this.state = { workNotes: this.props.serviceFailReason };
  }

  // 子组件定义的方法
  clearWorkNotes = () => {
    this.setState({
      workNotes: '',
    });
  };

  render() {
    return (
      <div></div>
    );
  }
}

export default CommunicationRecord;

二、父组件触发子组件方法

import CommunicationRecord from '@/components/CommunicationRecord';

class TellerWorkbench extends React.Component {
  private communicationRecordRef;
  constructor(props) {
    super(props);
    this.state = {
      workNotes: '',
  }

  // 创建ref实例
  this.communicationRecordRef = React.createRef();

  // 同级别子组件调用的方法（提交重置workNotes）
  reset = () => {
    // 触发子组件方法
    this.communicationRecordRef.current.clearWorkNotes();
  };

  render() {
    return (
      <div>
        <CommunicationRecord
            enableWorkNotes
            serviceFailReason={this.state.serviceFailReason}
            // 子组件声明ref
            ref={this.communicationRecordRef}
          />
      </div>
    )
  }
export default TellerWorkbench;