react获取input输入框的值的方法示例

318 阅读 0 评论 210 点赞

我是靠谱客的博主笨笨大米，这篇文章主要介绍react获取input输入框的值的方法示例，现在分享给大家，希望可以做个参考。

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

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

非受控组件获取 ref

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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({})

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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>
 )
 }
}