react class组件ref的用法

215 阅读1分钟
import React, { Component } from 'react'

export default class App extends Component {
    showData = () => {
        const { input1 } = this.refs
        console.log(input1.value, '点击获取');
    }
    showData2 = () => {
        const { input2 } = this.refs
        console.log(input2.value, '....失去焦点的时候获取')
    }
    render() {
        return (
            <div>
                <input type="text" placeholder="点击按钮提示数据" ref="input1" />&nbsp;&nbsp;
                <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref="input2" />&nbsp;&nbsp;
            </div>
        )
    }
}