react 表单

1. 包含表单的组件

受控组件：表单输入数据能自动收集成状态
非受控组件：需要时手动读取表单数据

如下：用户名是非受控组件，密码是受控组件

import React, { Component } from 'react';

class App extends Component {
  constructor(){
    super(...arguments)

    this.state = {
      pwd: ''
    }
  }
  handSubmit = (ev)=>{
    // 阻止默认提交事件
    ev.preventDefault();
    const name = this.name.value;
    const pwd = this.state.pwd;
    alert(`提交的用户名：${name}, 密码：${pwd}`)
    
  }
  handInput = (ev)=>{
    const pwd = ev.target.value;
    this.setState({pwd})
  }
  render() {
    return (
      <div>
          <form onSubmit={this.handSubmit}>
            用户名：<input  type='text' ref={input=>this.name = input}/> <br/>
            密码：<input  type='password' value={this.state.pwd} onInput={this.handInput} />  <br/>
            <input type='submit' value='提交'/>
          </form>
      </div>
    );
  }
}

export default App;