react学习(32)----onref
生活随笔
收集整理的這篇文章主要介紹了
react学习(32)----onref
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
// 父組件
import React from 'react'
import Son from './son'
import { Button } from 'antd'class Father extends React.Component {child: anyconstructor(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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 带你了解APP开发的具体流程
- 下一篇： “SD卡已损坏。可能需要重新格式化卡”