1

我真的被我正在构建的 React Web 应用程序的问题所困扰。我正在使用 array.map() 方法来动态创建下拉列表，我发现一切都在桌面浏览器上运行良好（包括在 Chrome 开发工具的移动视图中），但在实际的移动浏览器上却没有。我真的很感激你的想法！

预期行为

我希望通常从一组对象中填充下拉列表。然后，当用户单击下拉菜单中的一个项目时，它将触发 (1) 一个函数或 (2) 到 React 应用程序另一部分的链接。请注意，我使用 react-router-dom 来处理路由。

在移动浏览器上观察到的行为

下拉列表填充正确，但当我从选项中进行选择时它们会出现故障（参见图 1）。 在移动浏览器上观察到的行为

当下拉选择同时触发（react-router-dom 组件）并调用函数时，可以观察到此行为。在正确调用函数的有限情况下，传递了正确的参数并且函数确实正确执行。

代码片段

这是我用来生成链接列表的代码示例。它是一个简单的 React 功能组件，用作我的应用程序中所有设置页面的标题，并且该组件是React MaterializeCSS库的一部分，它似乎工作正常。：

const SettingsHeader = () => {

    let { url } = useRouteMatch();
    
    const { userAccess, styleItem, headerStyle, updateHeader, theme } = useContext(SettingsContext);

    const options = userAccess.length ? (
      userAccess.sort().map(permission => {
        // Returns an object with details needed to build the component via a Settings Context function.
        let details = styleItem(permission);
        return (
          <Link
            key={permission}
            to={`${url}${details.link}`}
            onClick={() => updateHeader(permission)}
          >
            <Icon className={theme.text}>{details.icon}</Icon>
            <span className={theme.text}> {details.text}</span>
          </Link>
        );
      })
    ) : (
      <h4 className="grey-text">
        <Icon>warning</Icon> You don't have permission to edit any settings.
      </h4>
    );
    
    return (
      <h4 className={theme.text}>
        <i className="material-icons">{headerStyle.icon}</i> {headerStyle.text}
        <Dropdown
          options={{ ... }}
          trigger={
            <Button className={"right " + theme.themeColor} node="button">
              Views
            </Button>
          }
        >
          {options}
          <a href="#!">
            <Icon className="grey-text">close</Icon>
            <span className="grey-text"> Close</span>
          </a>
        </Dropdown>
      </h4>
    );
}

这是我用来生成主题选项列表的代码示例，每个主题选项都调用我在应用程序的许多地方使用的 React 上下文组件中的一个函数：

const ThemeSettings = () => {

  // Brings in Theme update function from SettingsContext
  const { changeTheme, theme } = useContext(SettingsContext);

  // Array of possible themes.
  const themesList = ['Burnt Orange', 'Chrome', 'Deep Purple', 'Earth', 'Fresh Green', 'Green', 'Maroon', 'Navy', 'Pink', 'Red', 'Royal Blue', 'Teal']

  const themeOptions = themesList.map(theme => {
    let themeObject = getTheme(theme);

    return (
      <a href="#!" key={theme} onClick={(e) => changeTheme(e, theme) }>
        <Icon className={themeObject.text}>style</Icon>
        <span className={themeObject.text}> {theme}</span>
      </a>
    )
  });

  return (
    <Dropdown
      options={{ ... }}
      trigger={
        <Button className={"left " + theme.themeColor} node="button">
          Themes
        </Button>
      }
    >
      { themeOptions }
      <a href="#!">
        <Icon className="grey-text">close</Icon>
        <span className="grey-text"> Close</span>
      </a>
    </Dropdown>
  );
}

非常感谢您看一下！

4

1 回答 1

0

对于运行 iOS-13 的设备，这是一个已知的MaterializeCSS 错误。

在撰写本文时，我只能找到一种可用的解决方法，Falk在此问题线程中提到：

要修复它，我必须查看 https://github.com/Dogfalo/materialize的 #v1-dev 分支，使用 grunt 版本构建它，并为我的项目使用 /dist 文件夹中的 materialize.js。

于 2020-03-04T13:56:01.907 回答