react如何获取input值_react中怎么获取input的值

react获取input值的方法:1、通过event对象信息的方式获取input的值,语法如“inputChange(e){...}”;2、使用ref的方式获取input的值,语法如“this.setState({...})”。

本教程操作环境:windows7系统、react17.0.1版本,该方法适用于所有品牌电脑。

react 获取input 输入框的值

第一种方法:通过event对象信息的方式

第二种方法:使用ref的方式

通过event对象信息的方式this.inputChange(e)}/>

this.getInputValue} >获取input的值

inputChange(e){

alert(e.target.value)

this.setState({

username:e.target.value

})

}

getInputValue(){

alert(this.state.username)

}

使用ref的方式this.inputChange()}/>

this.getInputValue()} >获取input的值

inputChange(){

//获取dom节点元素

//1.添加ref属性

//2.使用this.refs.username获取dom节点

let val=this.refs.username.value;

this.setState({

username:val

})

}

getInputValue(){

console.log(this.state.username)

}

使用ref自定义一个属性,可以通过this.refs.属性名称.value获取内容。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值