使用react怎么获取input输入框的值

本篇文章给大家分享的是有关使用react怎么获取input输入框的值，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

react 获取input 输入框的值的多种方式

• 第一种方式 非受控组件获取

• 第二种方式 受控组件获取

非受控组件获取 ref

import React , {Component} from 'react';
export default class App extends Component{
 search(){
 const inpVal = this.input.value;
 console.log(inpVal);
 }
 
 render(){
 return(
  <div>
  <input type="text" ref={input => this.input = input} defaultValue="Hello"/>
  <button onClick={this.search.bind(this)}></button>
  </div>
 )
 }
}

使用defaultValue表示组件的默认状态，此时它只会被渲染一次，后续的渲染不起作用；input的值不随外部的改变而改变，由自己状态改变。

受控组件 this.setState({})

import React , {Component} from 'react';
export default class App extends Component{
 constructor(props){
 super(props);
 this.state = {
  inpValu:''
 }
 }
 
 handelChange(e){
 this.setState({
  inpValu:e.target.value
 })
 }
 
 render(){
 return(
  <div>
  <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
  </div>
 )
 }
}

以上就是使用react怎么获取input输入框的值，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。