关于React中受控组件的理解

      在HTML中，表单元素（input,select等）通常自己维护state，并且根据用户的输入进行更新。而在React中，可变状态通常保存在组件的state属性中，并且只能通过setState来进行更新。
      我们可以把两者结合起来,使React中的state成为唯一数据源。渲染表单的React组件还控制着用户输入过程中表单发生的操作。被react用这种元素控制取值的表单输入元素就叫做“受控组件”
例如 `

import React, {Component} from 'react';

export default class App extends Component {
    state = {
        username:"wsj"
    }
    render() {
        return (
            <div>
                <h1>登录页</h1>
                <input type="text" value={this.state.username} onChange={(evt)=>{
                    console.log("onChange",evt.target.value);
                    this.setState({
                        username:evt.target.value
                    })
                }
                }/>
                <button onClick={()=>{
                    console.log(this.state.username)
                }
                }>登录</button>
                <button onClick={()=>{
                    this.setState({
                        username:""
                    })
                }
                }>重置</button>
            </div>
        );
    }
}