React基础语法08-点击按钮，获取input框的值（通过ref来获取）

王小婷

发布于 2025-05-19 14:32:56

3640

文章被收录于专栏：编程微刊编程微刊

1：给元素定义ref属性

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

<input ref="username" onChange={this.inputChange}></input>

2：通过this.refs.username，获取dom节点

声明一个变量，获取input的value，获取到dom节点的值（表单输入的值）。

let  val=this.refs.username.value;

3：赋值

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

this.setState({
      username:val
})

4：点击事件

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

<button  onClick={this.getInput} >点击按钮获取input框的值</button>

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

getInput=()=>{
    alert(this.state.username);
}

Home.js

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;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

react