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;