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

1：给元素定义ref属性

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

代码语言：javascript复制

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

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

声明一个变量，获取input的value，获取到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;

dom input ref setstate state

0 人点赞