一. 非受控组件，现用现取（所有表单中输入框，选择框的值）

class Login extends React.Component{
                handleSubmit = (event)=>{
                    event.preventDefault(); //阻止表单的提交事件  阻止默认事件
                   
                    const {username,userpwd} = this
                    console.log(username.value,"----",userpwd.value);
                    return false;
                }
                render(){
                    return (
                        <form action="http://www.ncyteng.com" onSubmit={this.handleSubmit}>
                           用户名： <input ref={c=>this.username=c} type="text" />
                           密码：  <input  ref={c=>this.userpwd=c} type="password" />
                           <button>登陆</button>
                        </form>
                    )
                }
            }

二. 受控组件: 随着值的改变，自动存储到state中，需要用时，直接到this.state中取

class Login extends React.Component{
                //初始化状态
                state = {
                    username:'',
                    userpwd :''
                }
                //保存用户名到状态中
                saveUsername = (event)=>{
                    //console.log(event.target.value);
                    this.setState({username:event.target.value})
                }
                saveUserpwd = (event)=>{
                    //console.log(event.target.value);
                    this.setState({userpwd:event.target.value})
                }
                handleSubmit = (event)=>{
                    event.preventDefault(); //阻止表单的提交事件  阻止默认事件
                    const {username,userpwd} = this.state
                    console.log(`你的用户名是：${username}, 密码是: ${userpwd}`);
                }
                render(){
                    return (
                        <form action="http://www.ncyteng.com" onSubmit={this.handleSubmit}>
                           用户名： <input onChange={this.saveUsername} type="text" />
                           密码：  <input  onChange={this.saveUserpwd} type="password" />
                           <button>登陆</button>
                        </form>
                    )
                }
            }