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

input 输入框的值会跟着用户输入的改变而改变，onChange通过工具e拿到改变之后的状态并更新state，setState按照新的状态触发视图渲染，完成更新。

到此这篇关于react获取input输入框的值的要领示例的文章就先容到这了,更多相关react获取input输入框的值内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！

您大概感乐趣的文章: