javascript - 如何处理折叠菜单中常用功能的切换状态？

Question

我创建了一个折叠菜单并映射到渲染中的数据我还处理了折叠菜单，该菜单根据其特定的 ID 折叠和展开。但是，当我单击下一个折叠菜单时，它们上一个已关闭，再次单击下一个折叠菜单后，它将打开。我想编写一个功能，当我单击下一个折叠菜单时，前一个折叠菜单关闭，下一个同时打开。例如 lenskart 抽屉但我无法做到这一点

这是我的代码：

      const SideMenu = (props) => {
  const {signOut} = useContext(AuthContext);
  const [Routes, setRoutes] = useState([]);
  const [expanded, setCollapse] = useState(false);
  const [colId, setColID] = useState('');
  const [colorId, setColorID] = useState('');
  const [reflink, setRefLink] = useState(false);

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    setRoutes(api.getNavigation());
  };
  const toggleExpand = (id) => {
    setColorID(id);
    setRefLink(true);
    setColID(id);
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setCollapse(!expanded);
  };

  const changeColor = (id) => {
    setColorID(id);
    setRefLink(true);
  };

  console.log('expanded', expanded);
  return (
    <StrictMode>
      <ScrollView contentContainerStyle={styles.scroll}>
       
            <View>
              {Routes.map((o, i) =>
                o.subarr.length > 0 ? (
                  <View>
                    <TouchableOpacity onPress={() => toggleExpand(o.id)}>
                      <View style={styles.mainContainer}>
                        <View style={[styles.sidebarDesign]}>
                          <View style={styles.barIcon}>
                            <Icon.SimpleLineIcons
                              name={o.icon}
                              size={20}
                              color={
                                colorId === o.id ? Color.linkColor : Color.gray
                              }
                            />
                          </View>
                          <View style={styles.barLabel}>
                            <Text
                              style={[
                                styles.labelStyle,
                                colorId === o.id
                                  ? styles.linkText
                                  : styles.normalText,
                              ]}>
                              {o.title.toUpperCase()}
                            </Text>
                          </View>
                          <View style={styles.barIcon}>
                            <Icon.SimpleLineIcons
                              name={
                                colId === o.id
                                  ? expanded
                                    ? 'arrow-up'
                                    : 'arrow-down'
                                  : 'arrow-down'
                              }
                              size={20}
                              color={Color.grayDark}
                            />
                          </View>
                        </View>
                      </View>
                    </TouchableOpacity>

                    {o.subarr.map((r, j) => (
                      <View>
                        {colId === o.id
                          ? expanded && (
                              <TouchableOpacity
                                onPress={() => {
                                  props.navigation.navigate(r.label);
                                  changeColor(r.id);
                                }}>
                                <View style={[styles.sidebarDesign]}>
                                  <View style={styles.barIcon}>
                                    {/* <Icon.FontAwesome
                            name={r.icon}
                            size={20}
                            color={Color.gray}
                          /> */}
                                  </View>
                                  <View style={styles.barLabel}>
                                    <Text
                                      style={[
                                        styles.labelStyle,
                                        colorId === r.id
                                          ? styles.linkText
                                          : styles.normalText,
                                      ]}>
                                      {r.label.toUpperCase()}
                                    </Text>
                                  </View>
                                  <View style={styles.barIcon}>
                                    {/* <Text>icon</Text> */}
                                  </View>
                                </View>
                              </TouchableOpacity>
                            )
                          : null}
                      </View>
                    ))}
                  </View>
                ) : (
                  <View>
                    <TouchableOpacity
                      onPress={() => {
                        props.navigation.navigate(o.label);
                        changeColor(o.id);
                      }}>
                      <View style={[styles.sidebarDesign]}>
                        <View style={styles.barIcon}>
                          <Icon.SimpleLineIcons
                            name={o.icon}
                            size={20}
                            color={
                              colorId === o.id ? Color.linkColor : Color.gray
                            }
                          />
                        </View>
                        <View style={styles.barLabel}>
                          <Text
                            style={[
                              styles.labelStyle,
                              colorId === o.id
                                ? styles.linkText
                                : styles.normalText,
                            ]}>
                            {o.title.toUpperCase()}
                          </Text>
                        </View>
                        <View style={styles.barIcon}>
                          {/* <Text>icon</Text> */}
                        </View>
                      </View>
                    </TouchableOpacity>
                  </View>
                ),
              )}
            </View>
          </View>
          {/* <Divider style={styles.parentHr} /> */}
          <View style={styles.containerThree}>
            <View style={styles.bottomPart}>
              <View>
                <TouchableOpacity
                  onPress={() => {
                    signOut();
                  }}>
    </StrictMode>
  );
};

标签： javascriptreactjsreact-native

Answer 1

我不确定您以哪种形式获取数据，但我创建了相同的场景，其中有三个按钮，每个按钮的 onClick 上一条消息被隐藏，下一条消息同时显示。如果这对您有用，我已经创建了与您要求的相同的切换功能。

export default function Toggle() {

    const [toggleOne, settoggleOne] = useState(true);
    const [toggleTwo, settoggleTwo] = useState(false);
    const [toggleThree, settoggleThree] = useState(false);

    const toggleOnefn = () => {
        if(toggleOne == true){
            settoggleOne(false)
            settoggleTwo(true)
        }else{
            settoggleOne(true)
            settoggleTwo(false)
            settoggleThree(false)
        }
    }

    const toggleTwofn = () => {
        if(toggleTwo == true){
            settoggleTwo(false)
            settoggleThree(true)
        }else{
            settoggleTwo(true)
            settoggleOne(false)
            settoggleThree(false)
        }
    }

    const toggleThreefn = () => {
        if(toggleThree == true){
            settoggleThree(false)
            settoggleOne(true)
        }else{
            settoggleThree(true)
            settoggleTwo(false)
            settoggleOne(false)
        }
    }

    return (
        <div>
            <button onClick={toggleOnefn}>One</button>
            {
                toggleOne == true ? <p>Data One</p> : ''
            }
            <br />
            <button onClick={toggleTwofn}>One</button>
            {
                toggleTwo == true ? <p>Data One</p> : ''
            }
            <br />
            <button onClick={toggleThreefn}>One</button>
            {
                toggleThree == true ? <p>Data One</p> : ''
            }
            <br />
        </div>
    );
}