React基础语法01-双向数据绑定

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

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;