index.jsx 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import React, { Component } from "react";
  2. import { AtFloatLayout , AtCheckbox, AtButton } from "taro-ui";
  3. import 'taro-ui/dist/style/components/float-layout.scss';
  4. import 'taro-ui/dist/style/components/button.scss';
  5. import './index.less';
  6. class CheckboxPicker extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. checkboxOption: props.options || [],
  11. checkedList: []
  12. }
  13. this.handleClose = this.handleClose.bind(this);
  14. this.handleChange = this.handleChange.bind(this);
  15. this.handleConfirm = this.handleConfirm.bind(this);
  16. }
  17. componentDidUpdate(prevProps) {
  18. if (JSON.stringify(this.props.options) != JSON.stringify(prevProps.options)) {
  19. this.setState({ checkboxOption: this.props.options });
  20. }
  21. if (JSON.stringify(this.props.checkedList) != JSON.stringify(prevProps.checkedList)) {
  22. this.setState({ checkedList: this.props.checkedList });
  23. }
  24. }
  25. handleClose() {
  26. this.props.onClose();
  27. }
  28. handleChange(e) {
  29. this.setState({ checkedList: e });
  30. }
  31. handleConfirm() {
  32. const labelArr = [];
  33. const { checkedList, checkboxOption } = this.state;
  34. checkedList.map(checkedItem => {
  35. checkboxOption.map(optionItem => {
  36. if (checkedItem == optionItem.id) {
  37. labelArr.push(optionItem.title);
  38. }
  39. })
  40. })
  41. this.props.onConfirm(checkedList, labelArr);
  42. this.handleClose();
  43. }
  44. render() {
  45. const { checkboxOption, checkedList } = this.state;
  46. const checkboxOptions = checkboxOption.map(item => {
  47. return { label: item.title, value: item.id }
  48. })
  49. return (
  50. <AtFloatLayout isOpened={this.props.isOpened} title={this.props.title} scrollY onClose={this.handleClose}>
  51. <view style={{ paddingBottom: '90rpx'}}>
  52. <AtCheckbox
  53. options={checkboxOptions}
  54. selectedList={checkedList}
  55. onChange={this.handleChange}
  56. />
  57. <view className='operate-btn' style={{position: 'fixed', left: 0, right: 0, bottom: 0, height: '90rpx', background: '#fff'}}>
  58. <AtButton type='primary' size='normal' onClick={this.handleConfirm}>确定</AtButton>
  59. </view>
  60. </view>
  61. </AtFloatLayout>
  62. )
  63. }
  64. }
  65. export default CheckboxPicker;