跳到主要内容

useActionSheet

显示操作菜单

何时使用​

当需要使用操作菜单

API​

const { tapItem, show } = useActionSheet(initialOption);

参数说明​

initialOption: ActionSheetOption​

初始操作菜单配置(若指定后面可与新的配置合并)

参数说明类型默认值
alertText警示文案string-
itemList按钮的文字数组，数组长度最大为 6string[]-
itemColor按钮的文字颜色string-

返回值说明​

返回值说明类型
show显示操作菜单PromiseOptionalAction<ActionSheetOption, ActionSheetTapItem>
tapItem当前选中数据ActionSheetTapItem

tapItem​

返回值说明类型
tapIndex用户点击的按钮序号，从上到下的顺序，从 0 开始number
tapItem用户点击的按钮序号对应 itemList 的字符串string

代码演示​

feedback/useActionSheet/index
import React from 'react';
import { useActionSheet, useToast } from 'taro-hooks';
import { escapeState } from '@taro-hooks/shared';
import { useEffect } from '@taro-hooks/core';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const { show, tapItem } = useActionSheet({ itemList: ['A', 'B', 'C'] });
  const { show: showToast } = useToast({ duration: 2000, mask: true });

  useEffect(() => {
    if (escapeState(tapItem)) {
      const { tapIndex, tapItem: item } = escapeState(tapItem);
      showToast({ title: '\${tapIndex}/\${item}' });
    }
  }, [tapItem]);

  const handleChangeOption = () => {
    show({
      itemColor: '#C5D9E8',
      itemList: ['taro', 'hooks', 'taro-hooks'],
    });
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => show()}
        shape="square"
      >
        展示带初始配置的ActionSheet
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleChangeOption}
        shape="square"
      >
        展示新配置的ActionSheet
      </Button>
    </DemoContent>
  );
};

Hook 支持度​

微信小程序H5ReactNative
✔️✔️✔️