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;