【react练习】受控组件和非受控组件、获取form表单信息、阻止事件默认行为

同样整理自尚硅谷的视频

视频链接： https://www.bilibili.com/video/av51174155?from=search&seid=11218837597275325699

另：想投转载来着，可原文链接怎么也填不对┑(￣Д ￣)┍

/*
需求： 自定义包含表单的组件
输入用户名和密码后，点击登录弹出提示框显示输入信息
不提交表单

流程：
先定义组件类，然后渲染组件

本例知识点：
5 包含表单的组建分类
  a 受控组件：表单项输入数据能自动收集成状态 - 如password
  b 非受控组件：需要时才手动获取表单输入框的数据 - 如name
2 模板字符串
3 react的onChange
4 阻止事件的默认行为

受控组件虽然写起来麻烦，但不会直接操作dom，更符合react “尽量少地操作dom”的思想。




*/

//定义组件类
class LoginForm extends React.Component{
  constructor(props){
    super(props);
    
    //初始化状态
    this.state = {
      pwd: ''
    }
    
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handlePwdChange = this.handlePwdChange.bind(this);
  }
  
  handleSubmit(event){
    //不让表单提交 - 阻止默认行为
    event.preventDefault();
    
    const name = this.user.value;
    alert(`准备提交的用户名为${name}, 密码为${this.state.pwd}`);
    
  }
  
  handlePwdChange(event){
    //读取当前输入的值
    const pwd = event.target.value;
       
    //更新状态
    this.setState({pwd})
  }
  
  /*input的onChange：
  原生DOM中，在失去焦点时触发
  react中，输入后立即触发（这个描述不够精确，不过够用了）
  */
  render(){
    return(
    <form onSubmit={this.handleSubmit}>
    user: <input type='text' ref={input=>this.user =input}/>
    psd: <input type='password' value={this.state.pwd} onChange={this.handlePwdChange} />
        <input type='submit' value='login'/>
    </form>
    )
  }
  
}

//渲染组件标签
ReactDOM.render(<LoginForm />, 
                document.getElementById('root'))