React 中 Class 组件的表单处理：双向数据驱动

在 React 的 Class 组件中，结合 form 表单和 input 框实现双向数据绑定（双向数据驱动），可以通过以下步骤实现。我们将使用 this.setState 来更新状态，并将状态的值绑定到 input 的 value 属性上，同时通过 onChange 事件监听输入的变化。

实现代码

import React from 'react';

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        name: '',
        email: '',
        age: ''
      }
    };
  }

  // 通用的输入框变化处理函数
  handleInputChange = (event) => {
    const { name, value } = event.target; // 获取输入框的 name 和 value
    this.setState(prevState => ({
      formData: {
        ...prevState.formData, // 保留其他字段
        [name]: value // 动态更新对应的字段
      }
    }));
  };

  // 表单提交处理函数
  handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log('Form Data Submitted:', this.state.formData);
  };

  render() {
    const { name, email, age } = this.state.formData;

    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>Name:</label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={this.handleInputChange}
          />
        </div>
        <div>
          <label>Email:</label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={this.handleInputChange}
          />
        </div>
        <div>
          <label>Age:</label>
          <input
            type="number"
            name="age"
            value={age}
            onChange={this.handleInputChange}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default FormComponent;

---

代码说明

1. 状态管理：

   • 使用 this.state 存储表单数据，formData 是一个对象，包含 name、email 和 age 字段。
   • 通过 this.setState 更新状态。

2. 双向数据绑定：

   • 将 input 的 value 属性绑定到状态中的对应字段（如 this.state.formData.name）。
   • 通过 onChange 事件监听输入变化，调用 handleInputChange 方法更新状态。

3. 通用处理函数：

   • handleInputChange 是一个通用的输入变化处理函数，通过 event.target.name 和 event.target.value 动态更新对应的状态字段。

4. 表单提交：

   • 在 handleSubmit 中阻止默认提交行为，并打印当前的表单数据。