react使用ref获取

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

1.  
   import React, { useRef } from "react";
2.  
    
3.  
   export default function App() {
4.  
   const inputVal = useRef(null)
5.  
   const inputValOpt = () => {
6.  
   console.log(inputVal.current.value)
7.  
   }
8.  
   return (
9.  
   <div>
10.  
    <input type='text' ref={inputVal} />
11.  
    <button onClick={inputValOpt}>点击</button>
12.  
    </div>
13.  
    )
14.  
    }

2、react class组件ref的用法

1.  
   import React, { Component } from 'react'
2.  
    
3.  
   export default class App extends Component {
4.  
   showData = () => {
5.  
   const { input1 } = this.refs
6.  
   console.log(input1.value, '点击获取');
7.  
   }
8.  
   showData2 = () => {
9.  
   const { input2 } = this.refs
10.  
    console.log(input2.value, '....失去焦点的时候获取')
11.  
    }
12.  
    render() {
13.  
    return (
14.  
    <div>
15.  
    <input type="text" placeholder="点击按钮提示数据" ref="input1" />&nbsp;&nbsp;
16.  
    <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
17.  
    <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref="input2" />&nbsp;&nbsp;
18.  
    </div>
19.  
    )
20.  
    }
21.  
    }

这篇好文章是转载于：学新通技术网