表单处理

我们现在渲染一个 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 中，以方便对输入数据的进一步处理。