在React中的选择选项下拉列表中填写字段A后，如何自动填充字段B

import React, { useState } from 'react';

const AutoFillForm = () => {
  const [fieldA, setFieldA] = useState('');
  const [fieldB, setFieldB] = useState('');

  const handleFieldAChange = (e) => {
    const value = e.target.value;
    setFieldA(value);

    // 根据字段A的值来判断字段B的值
    let fieldValueB = '';
    if (value === 'option1') {
      fieldValueB = 'Value 1';
    } else if (value === 'option2') {
      fieldValueB = 'Value 2';
    }
    setFieldB(fieldValueB);
  };

  return (
    <div>
      <label htmlFor="fieldA">字段A：</label>
      <select id="fieldA" value={fieldA} onChange={handleFieldAChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>

      <br />

      <label htmlFor="fieldB">字段B：</label>
      <input id="fieldB" type="text" value={fieldB} readOnly />
    </div>
  );
};

export default AutoFillForm;