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输入框的值内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 解决react-native软键盘弹出挡住输入框的问题
• react在安卓中输入框被手机键盘遮挡问题的解决方法
• React-Native做一个文本输入框组件的实现代码
• react+antd.3x实现ip输入框

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！