组件通信05 -----ref

ref是react提供给我们的一个属性,通过它，我们可以访问 DOM 节点或者组件.
父组件

import React from 'react'
import Son from './Son'

class Parents extends React.Component {
    constructor(props) {
        super(props);
        // 创建ref
        this.son = React.createRef()
    }
    clearSonInput = () => {
        console.log(this.son)
        const { current } = this.son
        current.clearInput()
    }
    render() {
        return (
        <div>
            <Son ref={this.son} />
            <button type='primary' onClick={this.clearSonInput}>
            清空
            </button>
        </div>
        )
    }
}
export default Parents

子组件

// 子组件
import React from 'react'

class Son extends React.Component {
  state = {
    info: 'son',
  }
  handleChange = (e) => {
    this.setState({
      info: e.target.value,
    })
  }
  clearInput = () => {
    this.setState({
      info: '',
    })
  }
  render() {
    return (
      <div>
        <div>{this.state.info}</div>
        <input type='text' onChange={this.handleChange} />
      </div>
    )
  }
}
export default Son