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;