react——受控组件form基本使用

import React, { PureComponent } from 'react'export default class App extends PureComponent {constructor(){super();this.state={username:""}}render() {return (<div>{/* 如果没有onSubmit，则会默认提交方式，我们通过设置onSubmit来设置提交方式 */}<form onSubmit={e=>this.hadleSubmit(e)}><label htmlFor="username">用户：<input type="text" id="username" // 这个方法是当输入一旦发生改变，便会触发此方法（方法内部设置更新state数据）onChange={e=>this.uesrnamechange(e)}//再将state中的数据传递给输入框value值value={this.state.username}/></label><input type="submit" value="提交"/></form></div>)}hadleSubmit(event){// 阻止onsubmit的默认提交行为event.preventDefault();// 提交时，拿到最新的输入数据console.log(this.state.username)}uesrnamechange(event){// 当输入数据发生变化时，更新state中的数据this.setState({username:event.target.value})}
}