React:使用一组依赖于所选值的字段呈现表单

import React, { useState } from 'react';

const Form = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [showField, setShowField] = useState(false);

  const handleSelectChange = (event) => {
    const value = event.target.value;
    setSelectedValue(value);

    // 根据选中的值更新其他字段的状态
    if (value === 'option1') {
      setShowField(true);
    } else {
      setShowField(false);
    }
  };

  return (
    <div>
      <label htmlFor="selectField">Select a value:</label>
      <select id="selectField" value={selectedValue} onChange={handleSelectChange}>
        <option value="">Please select</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>

      {showField && (
        <div>
          <label htmlFor="dependentField">Dependent Field:</label>
          <input type="text" id="dependentField" />
        </div>
      )}
    </div>
  );
};

export default Form;