使用reactjs设置django表单的样式

import React, { useState } from 'react';

// 引入所需的样式文件

const FormComponent = () => {
  const [formData, setFormData] = useState({
    // 在state中存储表单字段的值
    field1: '',
    field2: '',
    // ...
  });

  const handleChange = (e) => {
    // 更新表单字段的值
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单提交逻辑
    // 可以使用formData中的字段值进行处理
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="field1">Field 1:</label>
        <input
          type="text"
          id="field1"
          name="field1"
          value={formData.field1}
          onChange={handleChange}
          // 添加合适的CSS类或内联样式来设置样式
        />
      </div>
      <div>
        <label htmlFor="field2">Field 2:</label>
        <input
          type="text"
          id="field2"
          name="field2"
          value={formData.field2}
          onChange={handleChange}
          // 添加合适的CSS类或内联样式来设置样式
        />
      </div>
      {/* 添加其他表单字段 */}
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormComponent;