我是 react 新手。我有一个下拉菜单,它为我提供了不同的语言来选择我想要共享给我的所有组件的语言,但我无法做到这一点。 到目前为止,我已经尝试了 localStorage 和 Context,但是每当我更改值时,我都看不到 App.js 中的更改。
这是我的组件
const RTL = () => {
const handleLanguageAction = lang => {
console.log(lang , 'language')
};
return (
<OptionsButton
list={portalLanguages}
float="right"
helper="Please select any language"
label="Language"
action={handleLanguageAction}
/>
);
};
这是我的 app.js
const App = ({ role }) => {
return (
<MuiThemeProvider theme={theme}>
<MuiPickersUtilsProvider utils={MomentUtils}>
<SnackbarProvider>
<BrowserRouter>
<div dir={DIR}>
<Layout>
<RouteFactory routes={RouteComponents} config={routesConfig} role={role} />
</Layout>
</div>
</BrowserRouter>
</SnackbarProvider>
</MuiPickersUtilsProvider>
</MuiThemeProvider>
);
};
我希望 app.js 监听下拉函数中的值变化,并且即使我刷新页面也应该保留该值。 有人能帮我吗?谢谢
最佳答案
您可以使用customEvent在RTL和App之间进行通信
RTL
const myEvent = new CustomEvent('language', { detail: { lang } });
document.body.dispatchEvent(myEvent);
App.js
document.body.addEventListener("language", (event) => {
console.log(event.detail);
});
关于javascript - 如何在react js中监听另一个组件中的下拉值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61100652/