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的主要内容,如果未能解决你的问题,请参考以下文章