我们现在渲染一个 LoginForm 表单来作为例子：
import React, { Component } from 'react';
class LoginForm extends Component {
state = {
account: {username: '', password: ''}
};
handleSubmit = (e) => {
e.preventDefault();
// 一般在这 ajax 请求服务器
console.log(e);
};
handleChange = (e) => {
let account = {...this.state.account};
account[e.currentTarget.name] = e.currentTarget.value;
this.setState({account});
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<div>
<label htmlFor="username">Username</label>
<input
id='username'
name='username'
type="text"
value={this.state.account.username}
onChange={this.handleChange}
/>
</div>
<div>
<label htmlFor="password">Password</label>
<input
id='password'
name='password'
type="password"
value={this.state.account.password}
onChange={this.handleChange}
/>
</div>
<button>Login</button>
</form>
</div>
);
}
}
export default LoginForm;
input 元素中我们设置的 value={this.state.account.username}，意味着 input 的值直接从 state 读取，input 中没有了自己的 state，这样的元素叫受控元素。
对于受控元素的 value，不能使用 null 和 undefined。所以我们初始化 username 和 password 的时候要使用空字符串。
每一个 form 元素都有一个 onSubmit 事件，这里我们定义为 handleSubmit() 函数。其参数 e 为事件对象本身（事件对象详细见：官方文档）。
函数 e.preventDefault() 表示阻止事件的 HTML 默认行为，比如这里点击按钮后的提交表单发起 HTTP 请求并重载整个页面的行为。
input 标签中的 onChange 事件，当 input 改变后就会执行，其参数 e 也是事件对象本身。我们使用 e.currentTarget 来获取 input 的当前参数（详细见：官方文档），并把它同步到 LoginForm 的 state 中，以方便对输入数据的进一步处理。
