时间戳

首页 > 解决方案 > 如何在反应js中侦听另一个组件中的下拉值

javascript - 如何在反应js中侦听另一个组件中的下拉值

问题描述

我是新手。我有一个下拉菜单，它为我提供了不同的语言来选择我想分享给我的所有组件，但我做不到。到目前为止，我已经尝试过 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 监听下拉功能中的值变化，即使我刷新页面也应该保留该值。有人能帮我吗？谢谢

标签： javascriptreactjsreact-reduxdropdownonchange

解决方案

您可以使用 customEvent 在 RTL 和 App 之间进行通信

RTL

const myEvent = new CustomEvent('language', { detail: { lang } });
document.body.dispatchEvent(myEvent);

应用程序.js

document.body.addEventListener("language", (event) => {
  console.log(event.detail);
});

推荐阅读