我想在反应中使用像全局状态这样的 textarea 输入但我在上下文文件中有问题

如何解决我想在反应中使用像全局状态这样的 textarea 输入但我在上下文文件中有问题

我需要五个不同组件中的类似 Textarea 输入的状态。我想在组件中读取该状态，进行计算并将结果写回 textarea。

import React,{ useState,Component } from "react";

const Context = React.createContext();

export default function App() {
    const [text,setText] = useState("");

    return (
        <Context.Provider value={this.state}>

        <textarea
            className="textarea"
            value={text}
            onChange={(e) => setText(e.target.value)}
            />{this.props.children}

        </Context.Provider>
    );
}

我的第二个组件
我的第二个组件需要更改文本使用的全局状态并在 textarea 中写回。 （component1 中的函数只是示例）

import React,{ Component,useContext } from "react";
import { Consumer } from "./context";

class component1 extends Component {
    const toupperCase = () => {
        setText(text.toupperCase());
    };

    render() {
        return (
            <Consumer>{value => {
                return

                <textarea
                    className="textarea"
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                />}}
                <button onClick={toupperCase}>U velika</button>
            </Consumer>
        );
    }
}

export default component1;