react中使用ref获取_react获取ref

1、react 函数组件使用useRef获取input框中的值

import React, { useRef } from "react";
 
export default function App() {
    const inputVal = useRef(null)
    const inputValOpt = () => {
        console.log(inputVal.current.value)
    }
    return (
        <div>
            <input type='text' ref={inputVal} />
            <button onClick={inputValOpt}>点击</button>
        </div>
    )
}

2、react class组件ref的用法

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>
        )
    }
}