React学习5.双向数据绑定

import React, { Component } from 'react';
import '../assets/test.less'

class TodoList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '123'
        }
    }

    inputChange = (e) => {
        this.setState({
            username: e.target.value
        })
    }
    setName = () => {
        this.setState({
            username: "李四"
        })
    }


    render() {
        return <div>
            <h2>双向数据绑定</h2>
            <hr />
            text: {this.state.username}
            <br />

            {/* value 与 defaultValue 的区别
            defaultValue 就是输入的内容
            value 数据不是写死的，是经过处理后重新渲染的。是this.state.username，this.state.username是有onChange事件管理的。
            */}
            <input defaultValue={this.state.username} onChange={this.inputChange} />

            <button onClick={this.setName}>恢复默认值</button>
        </div>
    }
}
export default TodoList;