MMAction 动作面板

用来代表用户或事物，支持图片、图标或字符展示。

Props

IMMActionSheetProps

属性	类型	默认值	必传	说明
visible	boolean		是	是否显示
title	ReactNode		否	标题
actions	IMMAction[]		是	选项
footer	ReactNode | false		否	自定义底部或者不显示底部
onClosed	() => void		否	关闭事件
onOpened	() => void		否	打开事件
onSelect	(value: IMMAction, index: number) => void		否	点击选项

代码示例

import { Component } from "react";
import MMActionSheet from "../../components/action-sheet";
import { View } from "@tarojs/components";
import MMButton from "../../components/button";
import MMNavigation from "../../components/navigation";
import { H3 } from "../../components/head";

export default class Index extends Component<any, any> {
  state = {
    visible: false,
    value: {},
    data: [
      { id: "1", text: "选项1" },
      { id: "2", text: "选项2" },
      { id: "3", text: "选项3" },
    ],

    multipleVisible: false,
    multipleValue: [] as string[],
    multipleValueCache: [] as string[],
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  onOptionsClick = (value: { id: string; text: string }, index: number) => {
    // eslint-disable-next-line no-console
    console.log(value, index);
    this.setState({
      value,
      visible: false,
    });
  };

  onOk = () => {
    this.setState({
      multipleVisible: false,
      multipleValue: this.state.multipleValueCache,
    });
  };

  render() {
    const { value, data } = this.state;
    return (
      <View>
        <MMNavigation title="动作面板" />

        {!!value.id && <H3 text={`选中了${JSON.stringify(value)}`} />}
        <View className="container">
          <View className="spacing" />
          <MMButton
            onClick={() => this.setState({ visible: true })}
            text="单选打开"
          />

          <MMActionSheet
            onClosed={this.onCancel}
            onSelect={this.onOptionsClick}
            title="请选择"
            visible={this.state.visible}
            actions={data}
          />
        </View>
      </View>
    );
  }
}