时间戳

首页 > 解决方案 > 匹配对象内函数的最佳方法 - React Native

reactjs - 匹配对象内函数的最佳方法 - React Native

问题描述

我想要的是在单击栏时调用 openMenu 函数，并在单击关闭图标时调用 closeMenu 函数。

我注意到icon.callFunc == openMenu总是错误的。日志

这是整个组件的来源。

const MenuBar = () => {

    const onPressHandler = () => {

        setIcon({
            icon: icon.icon === 'bars'? "window-close" : 'bars',
            callFunc: icon.callFunc == openMenu ? closeMenu : openMenu
        });
        console.log(icon.callFunc);
        icon.callFunc()

    }

    const closeMenu = () => {
        console.log("Closed");
    }

    const openMenu = () => {
        console.log("Opened");
    }


    const [icon, setIcon] = useState({
        icon: "bars",
        callFunc: openMenu
    })


    return (
        <TouchableOpacity
            onPress={onPressHandler}>
            
            <Icon
                name={icon.icon}
                size={25}
                color="white"
                solid
                style={{ paddingLeft: 14, padding: 20 }} />

        </TouchableOpacity>
    );
}

有什么建议吗？

标签： reactjsreact-nativejsx

解决方案

根据@Tarukami 的建议，您可能应该使用状态来管理您的菜单是否显示。

如果你真的想使用这条路线，你可以尝试检查函数名称而不是它的引用，这可能会有所不同。

  const onPressHandler = () => {
    setIcon({
      icon: icon.icon === "bars" ? "window-close" : "bars",
      callFunc: icon.callFunc.name === "openMenu" ? closeMenu : openMenu
    });
    console.log(icon.callFunc);
    icon.callFunc();
  };

我建议然后在“componentDidMount”useEffect 中初始化您的图标。

  useEffect(() => {
    setIcon({
      icon: "bars",
      callFunc: openMenu
    });
  }, []);

完整代码如下

import React, { useState, useEffect } from "react";

const App = (props) => {
  const closeMenu = () => {
    console.log("Closed");
  };

  const openMenu = () => {
    console.log("Opened");
  };

  const [icon, setIcon] = useState({});

  useEffect(() => {
    setIcon({
      icon: "bars",
      callFunc: openMenu
    });
  }, []);

  const onPressHandler = () => {
    setIcon({
      icon: icon.icon === "bars" ? "window-close" : "bars",
      callFunc: icon.callFunc.name === "openMenu" ? closeMenu : openMenu
    });
    console.log(icon.callFunc);
    icon.callFunc();
  };

  return <div onClick={onPressHandler}>fokoff</div>;
};

export default App;

CodeSandbox，请注意控制台中的“打开”和“关闭”切换。

同样重要的是要注意 setIcon 方法是异步的，因此即使您将 icon.callFunc 设置为 openMenu，因为它是“closeMenu”，“closeMenu”仍将在 icon.callFunc() 处触发，并且 openMenu 将在下一次调用 onPressHandler 时触发。

推荐阅读