React—收集表单数据

React—收集表单数据

非受控组件

想实现如下效果，在表单中输入用户名和密码，点击按钮之后，弹窗显示刚刚用户输入的内容。

//创建组件
    class Login extends React.Component{
      handleSubmit =(evevt)=>{
        evevt.preventDefault()//阻止表单提交
      alert('用户名：'+this.username.value+';密码：'+this.password.value)
      }
      render(){
        return(
          <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
            用户名：<input ref={(currentNode)=>{this.username=currentNode}}  type="text" name='username'/>
            密码：  <input ref={(currentNode)=>{this.password=currentNode}} type="password" name='password'/>
            <button>登录</button>
          </form>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Login/>,document.getElementById('test'))

实现效果：

页面中所有输入类的DOM都是现用现取。

受控组件

//创建组件
    class Login extends React.Component{
      //初始化状态
      state={
        username:'',//用户名
        password:''//密码
      }
      //保存用户名到状态中
      saveUsername=(evevt)=>{
        this.setState({username:evevt.target.value})
      }
      //保存密码到状态中
      savePassword=(evevt)=>{
        this.setState({password:evevt.target.value})
      }
      handleSubmit =(evevt)=>{
        evevt.preventDefault()//阻止表单提交  
        const {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
      }
      render(){
        return(
          <form action="http://www.atguigu.com" 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'))

也可实现同样效果。

页面中所有输入类的DOM随着输入，能将东西维护到状态中去，等到需要用的时候，直接从状态中取出来，即为受控组件。

两者相比，最好还是写受控组件，因为非受控组件的ref较多。