react 父组件中的事件调用子组件方法

父组件调用子组件方法

class 组件中，父组件中的方法调用子组件中的方法

// Child.js

exprot default class Child extends Component {
  state = {
    name: null
  };
  
  componentDidMount() {
    this.props.cRef(this); 
  }

  setName= () => {
    this.setState({
      name: "liu"
    });
  };
  
  render() {
    return (
      <div>{this.state.name}</div>
    );
  }
}

// App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Child from "./Child"

class App extends Component {
  childRef = ref => {
    this.child = ref;
  };

  updateChildState = () => {
    this.child.setName(); 
  };

  render() {
    return (
      <div>
        <Child cRef={this.childRef} />   
        <button onClick={this.updateChildState}>click</button>
      </div>
    );
  }
}

export default App

HOOK 中，父组件中的方法调用子组件中的方法

// Child.js

import React, { useState, useImperativeHandle } from 'react'

function Child({ cRef }) {
  const [name2, setName2] = useState('---')

  useImperativeHandle(cRef, () => ({
    showName2: (val) => {
      setName2(val)
    }
  }))
  
  return (
    <h1>这是子元素中的内容：{name2}</h1>
  )
}

export default Child

// Parent.js

import React, { useRef } from 'react'
import { Button } from 'antd'
import Child from './components/Child'

function Parent() {
  const childRef = useRef()
  const updateChildState = () => {
    childRef.current.showName2('child')
  }

  return (
    <div>
      <h1>这是父元素中的内容：parent</h1>
      <Button type="primary" onClick={updateChildState}>click</Button>
      <Child cRef={childRef} />
    </div>
  )
}

export default Parent