在React中使用依赖选择的动态表单

import React, { useState } from 'react';

const DynamicForm = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [gender, setGender] = useState('');
  const [options, setOptions] = useState([]);

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleAgeChange = (e) => {
    setAge(e.target.value);
  };

  const handleGenderChange = (e) => {
    setGender(e.target.value);
    // 根据选择的性别更新选项
    if (e.target.value === 'male') {
      setOptions(['Option 1', 'Option 2', 'Option 3']);
    } else if (e.target.value === 'female') {
      setOptions(['Option A', 'Option B', 'Option C']);
    } else {
      setOptions([]);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单提交逻辑
    console.log('Name:', name);
    console.log('Age:', age);
    console.log('Gender:', gender);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        Age:
        <input type="text" value={age} onChange={handleAgeChange} />
      </label>
      <br />
      <label>
        Gender:
        <select value={gender} onChange={handleGenderChange}>
          <option value="">Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </label>
      <br />
      {options.length > 0 && (
        <label>
          Options:
          <select>
            {options.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </label>
      )}
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default DynamicForm;