Reactjs React JS上下文API：从另一个组件访问输入值

如何使用上下文API使某个状态成为全局状态。例如，我在组件modalComponent.js中有以下输入：

然后我有一个handlessesschange函数，它根据用户选择的内容更改assessExam状态，如中所示：

handleAssessChange = (e) => {
        this.setState({ assessExam: e.target.value });
    };

现在的问题是如何获取此状态的值并将其记录到其他组件中？

使用上下文API

创建一个名为StateProvider.js的文件

从“React”导入React、{createContext、useContext、useReducer}； export const StateContext=createContext； export const StateProvider={reducer，initialState，children}=> {儿童} ; export const useStateValue==>useContextStateContext； 第二步-创建一个名为reducer.js的文件

导出常量初始状态={ 用户：， 图片：， }; 导出常量getBasketTotal=basket=> 篮子？.reduceamount，item=>item.price+金额，0； const reducer=状态，action=>{ 控制台.日志操作 开关动作类型{ 案例“添加用户”： 返回{ 状态 用户：action.name } 案例“添加图像”： 返回{ 状态 图片：action.image } 违约： 返回状态 } } 导出默认减速机； Change Index.js

从“React”导入React； 从“react dom”导入react dom； 导入“./index.css”； 从“./App”导入应用程序； 从“./reducer”导入{initialState} 从“./reducer”导入减速机 从“./StateProvider”导入{StateProvider} 将*作为serviceWorker从“/serviceWorker”导入； ReactDOM.render , document.getElementById'root' ; serviceWorker.unregister； 步骤4-为上下文api添加值

从“React”导入React，{useState，useEffect} const[{user}，dispatch]=useStateValue； 设置链接“/收件箱”； 派遣{ 键入：“添加用户”， 名称：username.trim } 步骤5-将您的上下文访问到其他文件

从“./Stateprovider”导入{useStateValue} const[{user}]=useStateValue； const onClick=event=>{ console.loguser }

---

您希望将状态存储在上下文中，并在需要访问状态的所有组件中使用上下文。您应该遵循，因为您似乎仍然在使用类组件而不是功能组件。实际上，我已经在使用react with redux来管理状态，只是不确定是否也应该使用redux来管理此状态值，因为我使用redux只是为了管理API状态……这完全取决于您。使用Redux而不是上下文对您有好处吗？如果您已经有了Redux，那么这似乎是一个放置所有全局状态的好地方

state = {
    assessExam: ''
 };

handleAssessChange = (e) => {
        this.setState({ assessExam: e.target.value });
    };