React.FC 表单组件自动赋值实现指南

在React中，可以使用state来保存表单的值，并在需要的时候将state的值赋给表单的value属性，从而实现表单的自动赋值。

以下是一个示例代码：

import React, { useState } from 'react';

const Form = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default Form;

在上面的代码中，我们使用了useState钩子来创建一个名为formData的state，它包含了表单的name、email和password的值。通过handleChange函数，我们实现了当表单的值发生变化时，更新formData的对应属性的值。然后，在每个表单元素中，我们将formData的对应属性的值赋给了value属性，这样就实现了表单的自动赋值。

注意：为了使表单的自动赋值正常工作，需要确保表单元素的name属性与formData对象中的属性名保持一致。