如何获取React组件的状态以实现全局保存按钮

import React, { useState, createContext, useContext } from 'react';

// 创建上下文对象
const GlobalContext = createContext();

// 全局保存按钮组件
const SaveButton = () => {
  const globalState = useContext(GlobalContext);

  const handleSave = () => {
    // 执行保存操作，使用 globalState 中的数据
    console.log('保存数据:', globalState);
    // 其他保存逻辑...
  };

  return (
    <button onClick={handleSave}>全局保存</button>
  );
};

// 使用全局保存按钮组件的其他组件
const MyComponent = () => {
  const [data, setData] = useState('');

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <SaveButton />
    </div>
  );
};

const App = () => {
  const [globalState, setGlobalState] = useState('');

  return (
    <GlobalContext.Provider value={globalState}>
      <MyComponent />
    </GlobalContext.Provider>
  );
};

export default App;