欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-08 15:26:27
react 获取input 输入框的值的多种方式 第一种方式 非受控组件获取 第二种方式 受控组件获取非受控组件获取 refimport react , {component} from 'rea...

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