React类组件调用函数组件的方法及使用函数组件的state变量

 

 

函数组件内容如下，主要使用到了react hook，

https://react.docschina.org/docs/hooks-overview.html   hook概览

https://react.docschina.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-component

import React, {useState,  useRef, useImperativeHandle, forwardRef } from 'react';
const Container = forwardRef((
  props,
  ref,
) => {
  const cref = useRef()
  const [value, setValue] = useState('')
  const handleClear = () => {
    console.log('handle clear')
  }
  useImperativeHandle(ref, () => ({
    handleClear,
    inputValue: cref.current.value 
  }))
  const changeValue = (e) => {
    setValue(e.target.value)
  } 
  return (
    <div>
      <h1>test</h1>
      <input ref={cref} value = {value} onChange={changeValue}></input>
    </div>
  )
})

export default Container;

在父组件中

引入Container组件后，在constructor()里

constructor() {
    super();
    this.containerRef = React.createRef()
  }

render（） 

<div>
  <button onClick={this.test}>test</button>
  <Container ref={this.containerRef}  />
</div>

test按钮触发的函数

  const test = () => {
    console.log(this.containerRef)
    this.containerRef.current.handleClear()
    console.log(this.containerRef.current.inputValue)
  }

参考https://www.jianshu.com/p/11198c03a038