javascript - 如何在react js中监听另一个组件中的下拉值

Question

我是 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 监听下拉函数中的值变化，并且即使我刷新页面也应该保留该值。有人能帮我吗？谢谢

Answer 1

您可以使用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);
});