表单处理

我们现在渲染一个 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 (  
      

        

          

            Username
            
          
          

            Password
            
          
          Login
        
      
    );
  }
}
 
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 中，以方便对输入数据的进一步处理。