React基础语法07-点击按钮，获取input框的值（通过事件对象获取）

• 2019 年 11 月 10 日
• 笔记

点击按钮，获取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;