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

• 2019 年 11 月 10 日
• 筆記

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;