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;