React.js中如何收集表单值？新手求正确实现方式

嘿，作为React新手纠结这个太正常啦！其实你看到的两种写法本质都是React推荐的受控组件模式——这就是收集表单值的标准做法，核心是让组件的state成为表单数据的唯一“数据源”，表单输入的值完全由state控制，输入变化时同步更新state。

我给你拆解下这两种写法的适用场景：

1. 单个字段单独写处理函数 #

这种写法适合表单字段比较少的情况，代码直观，一眼就能看明白每个输入对应哪个处理逻辑：

class EmailForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { email: '' };
    // 绑定this，避免类组件里的作用域问题
    this.handleEmailChange = this.handleEmailChange.bind(this);
  }

  handleEmailChange(e) {
    // 输入变化时更新对应state
    this.setState({ email: e.target.value });
  }

  render() {
    return (
      <input 
        type="text" 
        name="email" 
        placeholder="Email" 
        value={this.state.email} 
        onChange={this.handleEmailChange} 
      />
    );
  }
}

2. 共用一个通用的onChange函数 #

当表单字段多的时候（比如用户注册表单有姓名、邮箱、密码等），写一堆单独的处理函数太麻烦，这时候就可以利用input的name属性和ES6的计算属性名，用一个函数搞定所有输入的更新：

class RegisterForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fname: '', lname: '', email: '' };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    // 解构获取输入的name和value
    const { name, value } = e.target;
    // 用计算属性名更新对应的state字段
    this.setState({ [name]: value });
  }

  render() {
    return (
      <div className="form">
        <input 
          type="text" 
          name="fname" 
          placeholder="First Name" 
          value={this.state.fname} 
          onChange={this.onChange} 
        />
        <input 
          type="text" 
          name="lname" 
          placeholder="Last Name" 
          value={this.state.lname} 
          onChange={this.onChange} 
        />
        <input 
          type="email" 
          name="email" 
          placeholder="Email" 
          value={this.state.email} 
          onChange={this.onChange} 
        />
      </div>
    );
  }
}

函数组件+Hook的写法（现在更常用） #

如果你用的是React函数组件，搭配useState Hook可以更简洁地实现受控组件：

import { useState } from 'react';

function LoginForm() {
  // 用一个state对象存储所有表单数据
  const [formData, setFormData] = useState({ username: '', password: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    // 展开之前的state，只更新当前变化的字段
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };

  return (
    <div className="login-form">
      <input 
        type="text" 
        name="username" 
        placeholder="Username" 
        value={formData.username} 
        onChange={handleChange} 
      />
      <input 
        type="password" 
        name="password" 
        placeholder="Password" 
        value={formData.password} 
        onChange={handleChange} 
      />
    </div>
  );
}

总结 #

不管是单个处理函数还是共用函数，都是受控组件的实现，这就是React中收集表单值的标准方式。它的好处是：

• 表单数据完全由state掌控，方便做实时验证、表单重置、数据同步等操作
• 符合React的单向数据流理念，让组件逻辑更清晰

内容的提问来源于stack exchange，提问作者abu abu