React基础篇之收集表单数据

非受控组件

<script type="text/babel">
  //创建组件
  class Login extends React.Component{
    handleSubmit = (event)=>{
      event.preventDefault() //阻止表单提交
      const {username,password} = this
      alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
    }
    render(){
      return(
        <form 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'))
</script>

受控组件

<script type="text/babel">
  //创建组件
  class Login extends React.Component{

    //初始化状态
    state = {
      username:'', //用户名
      password:'' //密码
    }

    //保存用户名到状态中
    saveUsername = (event)=>{
      this.setState({username:event.target.value})
    }

    //保存密码到状态中
    savePassword = (event)=>{
      this.setState({password:event.target.value})
    }

    //表单提交的回调
    handleSubmit = (event)=>{
      event.preventDefault() //阻止表单提交
      const {username,password} = this.state
      alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }

    render(){
      return(
        <form 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'))
</script>