React02_收集表单数据3_受控组件与非受控组件

2.5 收集表单数据

• 效果

  定义一个包含表单的组件，输入用户名和密码之后，点击登录有弹框提示

  // 创建组件
  class Login extends React.Component{
        
        
  
      showInfo = (event)=>{
        
        
          // 阻止表单的提交
          event.preventDefault();
  
          const {
        
        username, password} = this;
          alert(`你输入的的用户名是${
          
          username.value},你输入的密码是${
          
          password.value} `)
  
      }
  
      render (){
        
        
          return (
              <form action="http://www.atguigu.com" onSubmit={
        
        this.showInfo}>
              用户名：<input ref={
        
        c=>this.username=c} type="text" name="username" />  
              <br/>
              密码：<input ref={
        
        c=>this.password = c} type="password" name="password" />
              <br/>
              <button>登录</button>
  			</form>
  		)
  	}
  }
  // 渲染组件
  ReactDOM.render(<Login/>, document.getElementById('container'))
  

• 理解

  • 受控组件

    // 创建组件
    class Login extends React.Component{
            
            
        // 初始化状态
        state = {
            
            
            username : '',
            password : ''
        }
        // 保存用户名到状态中
        saveUsername = (event)=>{
            
            
            console.log(event.target.value);
            this.setState({
            
            
                username : event.target.value
            })
        }
        // 保存密码到状态中
        savePassword = (event)=>{
            
            
            console.log(event.target.value);
            this.setState({
            
            
                password : event.target.value
            })
        }
        showInfo = (event)=>{
            
            
            // 阻止表单的提交
            event.preventDefault();
    
            const {
            
            username, password} = this.state;
            alert(`你输入的的用户名是${
              
              username},你输入的密码是${
              
              password} `)
        }
    
        render (){
            
            
            return (
                <form action="http://www.atguigu.com" onSubmit={
            
            this.showInfo}>
                用户名：<input onChange={
            
            this.saveUsername} type="text" name="username" /> <br/>
               	密码：<input onChange={
            
            this.savePassword} type="password" name="password" /> <br/>
                <button>登录</button>
        		</form>
        	)
        }
    }
    
    // 渲染组件
    ReactDOM.render(<Login/>, document.getElementById('container'))
    

  • 非受控组件 : 现用现取