如何使用reactJS更改基于下拉选择的表单域

import React, { useState } from 'react';

const FormComponent = () => {
  const [selectedOption, setSelectedOption] = useState('');

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

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

  return (
    <form onSubmit={handleSubmit}>
      <label>
        选择一个选项：
        <select value={selectedOption} onChange={handleSelectChange}>
          <option value="">请选择</option>
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
      </label>
      {selectedOption === 'option1' && (
        <input type="text" placeholder="输入选项1的值" />
      )}
      {selectedOption === 'option2' && (
        <input type="text" placeholder="输入选项2的值" />
      )}
      {selectedOption === 'option3' && (
        <input type="text" placeholder="输入选项3的值" />
      )}
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;