点击按钮，获取input框的值（通过事件对象获取）的四个步骤：
1：监听表单的改变事件
模板：
<input onChange={this.inputChange}></input><button >点击按钮获取input框的值</button>
方法
inputChange=()=>{ console.log(111) }
只要触发inputChange的时候，都会在控制台看到打印111，说明监听成功。
2：在改变的事件里面获取表单输入的值
获取表单输入的值 event.target.value。
inputChange=(event)=>{ console.log(event.target.value) }
3：把表单输入的值赋值给username
在this.state里面定义一个空的username:''，并且把把表单输入的值赋值给username。
//把表单输入的值赋值给username this.setState({ username:event.target.value })
4：点击按钮的时候获取state里面的username
然后在模板中按钮上绑定一个点击事件getInput，点击按钮的时候获取state里面的username。
<button onClick={this.getInput} >点击按钮获取input框的值</button>
写好之后写点击事件getInput的方法，因为input框的值已经给了username，所以：
getInput=()=>{ alert(this.state.username); }
参考代码：
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 = { msg: '我是王小婷定义的数据OO', username:'' } } inputChange=(event)=>{ console.log(event.target.value); //把表单输入的值赋值给username this.setState({ username:event.target.value }) } getInput=()=>{ alert(this.state.username); } render() { return ( <div> <input onChange={this.inputChange}></input><button onClick={this.getInput} >点击按钮获取input框的值</button> </div> ) } } export default Home;
