前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React基础语法08-点击按钮,获取input框的值(通过ref来获取)

React基础语法08-点击按钮,获取input框的值(通过ref来获取)

作者头像
王小婷
发布2019-11-10 16:02:25
5K0
发布2019-11-10 16:02:25
举报
文章被收录于专栏:编程微刊

1:给元素定义ref属性

要获取那个dom节点,就在dom节点上写上名称。

代码语言:javascript
复制
<input ref="username" onChange={this.inputChange}></input>
2:通过this.refs.username,获取dom节点

声明一个变量,获取inputvalue,获取到dom节点的值(表单输入的值)。

代码语言:javascript
复制
let  val=this.refs.username.value;
3:赋值

使用setState来改变username的值,让username的值等于val,即表单输入的值就赋给了userusername

代码语言:javascript
复制
this.setState({
      username:val
})
4:点击事件

然后在模板中按钮上绑定一个点击事件getInput,点击按钮的时候获取state里面的username

代码语言:javascript
复制
<button  onClick={this.getInput} >点击按钮获取input框的值</button>

写好之后写点击事件getInput的方法,因为input框的值已经给了username,所以:

代码语言:javascript
复制
getInput=()=>{
    alert(this.state.username);
}

Home.js

代码语言:javascript
复制
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
    constructor() {
        super();
        //react定义数据
        this.state = {
            
            username:''
        }
    }
    inputChange=(event)=>{
        let  val=this.refs.username.value;
        this.setState({
            username:val
        })
    }
    getInput=()=>{
        alert(this.state.username);
    }
    render() {
        return (
            <div>
                <input ref="username" onChange={this.inputChange}></input><button  onClick={this.getInput} >点击按钮获取input框的值</button>
            </div>
        )
    }
}
export default Home;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2:通过this.refs.username,获取dom节点
  • 3:赋值
  • 4:点击事件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档