React收集表单数据(受控，非受控组件)

非受控组件

class Login extends React.Component{
      handleSubmit = (event) =>{
            event.preventDafault();      //阻止表单提交
            const {username,password} = this
            console.log(username.value,password.value);
      }
      render(){
            return(
                  <form action="#" onSubmit={this.handleSubmit} >
                          用户名：<input ref="c=>this.username =c" type="text" name="username" />
                          密码：<input ref="c=>this.password=c" type="password" name="password" />
                          <button >登录</button>
                  </form>
            )
      }
}
ReactDom.render(<Login/>,document.getElementById('test'))

受控组件

class Login extends React.Component{
      //初始化状态
      state = {
            username:'',
            password:'',
      }
      
      //保存用户名到状态中
      saveUsername = (event) =>{
            console.log("change")
            console.log(event.target.value)
            this.setState({username:event.target.value})
      }
      //保存密码到状态中
      savePassword = (event) =>{
            this.setState({password:event.target.value})
      }

      handleSubmit = (event) =>{
            event.preventDafault();      //阻止表单提交
            const {username,password} = this.state
            console.log(username,password);
      }

      render(){
            return(
                  <form action="#" onSubmit={this.handleSubmit} >
                          用户名：<input onChange={this.saveUsername} type="text" name="username" />
                          密码：<input onChange={this.savePassword  type="password" name="password" />
                          <button >登录</button>
                  </form>
            )
      }
}
ReactDom.render(<Login/>,document.getElementById('test'))