react学习(32)----onref

Posted 小歌谣(公众号同名)

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react学习(32)----onref相关的知识,希望对你有一定的参考价值。

// 父组件
import React from 'react'
import Son from './son'
import { Button } from 'antd'

class Father extends React.Component {
  child: any
  constructor(props) {
    super(props)
  }
  sonRef = (ref) => {
    this.child = ref // 在这里拿到子组件的实例
  }
  clearSonInput = () => {
    this.child.clearInput()
  }
  render() {
    return (
      <div>
        <Son onRef={this.sonRef} />
        <Button type='primary' onClick={this.clearSonInput}>
          清空子组件的input
        </Button>
      </div>
    )
  }
}
export default Father

// 子组件
import React from 'react'
import { Button } from 'antd'

interface IProps {
  onRef: any
}

class Son extends React.Component<IProps> {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    this.props.onRef(this) // 在这将子组件的实例传递给父组件this.props.onRef()方法
  }
  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

以上是关于react学习(32)----onref的主要内容,如果未能解决你的问题,请参考以下文章

React(74)--onRef在react中的使用

React开发(139):react中onref

react中父组件调用子组件方法(onRef)

React开发(161):onref绑定

React开发(160):onref使用

React—Modal 的确认按钮在 Form 之外,且用到onRef父调子