Mobx react表单根据条件在单击时添加字段

import React, { useState } from 'react';
import { observer } from 'mobx-react';

const FormComponent = observer(() => {
  const [formState, setFormState] = useState({
    field1: '',
    field2: '',
    showField3: false,
    field3: ''
  });

  const handleClick = () => {
    if (formState.field1 === 'condition') {
      setFormState({ ...formState, showField3: true });
    }
  };

  return (
    <div>
      <input
        type="text"
        value={formState.field1}
        onChange={(e) => setFormState({ ...formState, field1: e.target.value })}
      />
      <input
        type="text"
        value={formState.field2}
        onChange={(e) => setFormState({ ...formState, field2: e.target.value })}
      />
      {formState.showField3 && (
        <input
          type="text"
          value={formState.field3}
          onChange={(e) => setFormState({ ...formState, field3: e.target.value })}
        />
      )}
      <button onClick={handleClick}>Add Field</button>
    </div>
  );
});

export default FormComponent;