使用React和多个表单字段构建动态表单

javascript
import React, { useState } from 'react';
const DynamicForm = () => {
  const [formFields, setFormFields] = useState({
    name: '',
    email: '',
    password: ''
  });
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormFields({ ...formFields, [name]: value });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formFields);
  };
  return (
    
      
        Name:
                  type="text"
          name="name"
          value={formFields.name}
          onChange={handleInputChange}
        />
      
      
        Email:
                  type="email"
          name="email"
          value={formFields.email}
          onChange={handleInputChange}
        />
      
      
        Password:
                  type="password"
          name="password"
          value={formFields.password}
          onChange={handleInputChange}
        />
      
      Submit
    
  );
};
export default DynamicForm;

javascript
import React from 'react';
import DynamicForm from './DynamicForm';
const App = () => {
  return (
    
      
Dynamic Form Example
      
    
  );
};
export default App;