React 实现表单数据收集

需求分析：自定义包含表单的组件
1：界面见截图
2: 输入用户名 密码后 点击登陆提示出输入信息
3：不提交表单

老规矩，大佬请绕道，本Demo适合新手小白，练习效果如下

老规矩直接上代码

class LoginTest extends React.Component{
    constructor(props){
        super(props)

        this.state={
            pwd: ''
        }

    }

    handleSubmit=(event)=>{
        const name = this.nameInput.value
        const {pwd} = this.state
       alert(`准备提交的用户名为${name}, 密码为 ${pwd}`)
     
       //阻止事件提交
       event.preventDefault()
    }

    handleChange=(event)=>{
      //读取输入框的值
      const pwd = event.target.value
      // 更新pwd的值
      this.setState({pwd})
    }

    render(){
        return(
            <div>
               <form action="/test" onSubmit={this.handleSubmit}> 
               //非受控组件（新手不知道概念，自行Google）
               用户名：<input type="text" ref={input=>this.nameInput=input}/>
               //受控组件
               密码：<input type="passworld" value={this.state.pwd} onChange={this.handleChange}/>
                <input type="submit" value="登陆"/>
               </form>
            </div>
        )
    }
}

ReactDOM.render(
    <LoginTest />, document.getElementById('root')
);

虽然简单，但是还是需要多多练习