import React, { Component } from "react"; import { AtFloatLayout , AtCheckbox, AtButton } from "taro-ui"; import 'taro-ui/dist/style/components/float-layout.scss'; import 'taro-ui/dist/style/components/button.scss'; import './index.less'; class CheckboxPicker extends Component { constructor(props) { super(props); this.state = { checkboxOption: props.options || [], checkedList: [] } this.handleClose = this.handleClose.bind(this); this.handleChange = this.handleChange.bind(this); this.handleConfirm = this.handleConfirm.bind(this); } componentDidUpdate(prevProps) { if (JSON.stringify(this.props.options) != JSON.stringify(prevProps.options)) { this.setState({ checkboxOption: this.props.options }); } if (JSON.stringify(this.props.checkedList) != JSON.stringify(prevProps.checkedList)) { this.setState({ checkedList: this.props.checkedList }); } } handleClose() { this.props.onClose(); } handleChange(e) { this.setState({ checkedList: e }); } handleConfirm() { const labelArr = []; const { checkedList, checkboxOption } = this.state; checkedList.map(checkedItem => { checkboxOption.map(optionItem => { if (checkedItem == optionItem.id) { labelArr.push(optionItem.title); } }) }) this.props.onConfirm(checkedList, labelArr); this.handleClose(); } render() { const { checkboxOption, checkedList } = this.state; const checkboxOptions = checkboxOption.map(item => { return { label: item.title, value: item.id } }) return ( 确定 ) } } export default CheckboxPicker;