2.4 React 事件处理，受控组件和非受控组件。

参考视频：

https://www.bilibili.com/video/BV1wy4y1D7JT?p=34

https://www.bilibili.com/video/BV1HC4y1t7hi 

 

受控组件：

　　表单元素 <Input> ,<textare>和 <select> 会自己维护 state，并且根据用户的输入进行更新。

　　在React，可以变状态 通常保存在组件的state属性中，并且只能通过 setState（）更新。

　　可以把两者结合起来，让React 的state成为唯一的数据原，渲染表单的react组件还受到用户的输入过程中，表单发生的操作。被React 以这种方式控制的表单输入元素，就成为受控组件。

 

非受控组件：

　　表单状态由自身维护，而不是由state来维护。

 

一般来说：受控组件：官方希望react来托管 state的值。

非受控组件：引入第三方的库。

 

 

代码：就是事件里面的函数，可以控值state的值，然后调用state的值，进行使用。（值在那呢？ event.target.value）

 

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        username:'',
        password:''
    }

    handleSubmit = (event) => {
        event.preventDefault() //阻止表单提交。
        const {username,password} = this.state
        alert(`useranme:${username},password: ${password}`)//取出来！
    }
    saveUserName = (event) =>{
        console.log('eee')
        this.setState({
            username:event.target.value
        })
    }
    savePassword = (event) =>{
        this.setState({
            password: event.target.value
        })
    }
    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit} >
                    用户名：<input onChange={this.saveUserName} type= "text" name="username" />
                    密码： <input onChange={this.savePassword} type="password" name="password" />
                <button>登录</button>
                </form>
            </div>
        )
    }
}