React基礎語法01-雙向數據綁定

  • 2019 年 11 月 11 日
  • 筆記

1:model改變視圖view

model裡面的值賦給input,即把this.state裡面的username值給了input,當頁面載入的時候,model層就能改變視圖view。 model

this.state = {      username:'111'  }

view

<input value={this.state.username} ></input>

2:同理反過來,view改變反過來影響model

監聽 onChange事件

 onChange={this.inputChange}

封裝方法

inputChange = (e) => {          this.setState({              username: e.target.value          })  }
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:'134567811'          }      }      inputChange = (e) => {          this.setState({              username: e.target.value          })      }      setUsername=(e)=>{          this.setState({              username: '肖戰'          })      }      render() {          return (              <div>                  <h2>雙向數據綁定</h2>                  {/* 2:同理反過來,view改變反過來影響model */}                  {this.state.username}                  <input value={this.state.username}  onChange={this.inputChange}></input>                  {/* 1:model改變視圖view */}                  <button  onClick={this.setUsername}>改變username的值</button>              </div>          )      }  }  export default Home;