如何在用户填写并在页面上单击save - react-bootstrap后从选项卡窗格中的组件获取数据

import React, { useState } from 'react';
import { Tabs, Tab, Button } from 'react-bootstrap';

const MyComponent = () => {
  const [data, setData] = useState({});
  const [saveSuccess, setSaveSuccess] = useState(false);

  const handleTabChange = (key) => {
    // Handle tab change if needed
  };

  const handleInputChange = (event, componentName) => {
    const value = event.target.value;
    setData(prevData => ({
      ...prevData,
      [componentName]: value
    }));
  };

  const handleSave = () => {
    // Access data from each component
    const component1Data = data.component1;
    const component2Data = data.component2;
    // Perform necessary operations with the data

    // Set save success state
    setSaveSuccess(true);
  };

  return (
    <div>
      <Tabs defaultActiveKey="component1" onSelect={handleTabChange}>
        <Tab eventKey="component1" title="Component 1">
          <input
            type="text"
            value={data.component1 || ''}
            onChange={(event) => handleInputChange(event, 'component1')}
          />
        </Tab>
        <Tab eventKey="component2" title="Component 2">
          <input
            type="text"
            value={data.component2 || ''}
            onChange={(event) => handleInputChange(event, 'component2')}
          />
        </Tab>
      </Tabs>

      <Button onClick={handleSave}>Save</Button>

      {saveSuccess && <p>Data saved successfully!</p>}
    </div>
  );
};

export default MyComponent;