actionSheet

ActionSheet 组件 API

ActionSheet组件

Properties	Descrition	Type	Default
show	ActionSheet的显示隐藏：false-隐藏，true-显示	bool	false
actionMenus	菜单选项设置	Array[{text,current,onClick}]; text-选项文本；current-bool类型，是否文当前选中项；onClick-点击回调	[]
cancelText	取消文本	String	'取消'
cancelFun	取消回调函数	function	null

使用实例

import { Component } from 'react'
import Button from '../../../packages/button'
import { Flex } from '../../../packages/flex'
import ActionSheet from '../../../packages/actionsheet'

export default class DemoActionSheet extends Component {
	constructor(prop) {
		super(prop);

		this.state = {
			show: false
		}
	}

	handle() {
		this.setState({
			show: true
		})
	}

	cancelFun(e, actionSheet) {
		console.log(e);
		console.log(actionSheet);

		this.setState({
			show: false
		})
	}


	render() {

		const actionMenus = [
			{
				text: '选项一',
				current: true,
				onClick:  (e, actionSheet) => {
					console.log('选项一');

					this.cancelFun(e, actionSheet)
				}
			},
			{
				text: '选项二',
				onClick:  (e, actionSheet) => {
					console.log('选项二');

					this.cancelFun(e, actionSheet)
				}
			}
		]


		return(
			<div>
				<Flex>
					<Button size="large" type="white-orange" onClick={this.handle.bind(this)}>actionsheet</Button>
				</Flex>
				<ActionSheet show={this.state.show}
				             actionMenus={actionMenus}
				             cancelText="取消选项"
							 cancelFun={this.cancelFun.bind(this)}/>
			</div>

		)
	}
}

展示

https://eric124120.github.io/fmui-react/#/actionsheet