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;
