/** * 移动端复选框封装 */ import React, { Component } from 'react'; import { Checkbox, Flex } from 'antd-mobile'; const AgreeItem = Checkbox.AgreeItem; export default class CheckBox extends Component { constructor(props) { super(props); const value = props.value || {}; this.state = { list: !!value.list ? value.list : [], }; } triggerChange = (changedValue) => { // Should provide an event to pass value to Form. const onChange = this.props.onChange; if (onChange) { this.setState({ list: changedValue.list, }); // 传入数据源错误导致web端和移动端冲突修改为以下传入 onChange(changedValue.list); } }; componentWillReceiveProps(nextProps) { // Should be a controlled component. if ('value' in nextProps) { const value = nextProps.value; this.setState(value); } } handelChange = (value) => { let { list } = this.state; if (list.includes(value)) { // if (!('value' in this.props)) { this.triggerChange({ list: this.state.list.filter((item) => item !== value) }); // } } else { // if (!('value' in this.props)) { this.triggerChange({ list: [...list, value] }); // } } }; /** * 是否默认选中 */ getChecked = (value) => { let isArray = Array.isArray; if (this.props.value) { if (isArray(this.props.value)) { let list = this.props.value; return !!list ? list.includes(value) : false; } else { let { list } = this.props.value; return !!list ? list.includes(value) : false; } } }; render() { let { options, initValue } = this.props; return ( <div> {options.map((item, index) => { return ( <Flex.Item> <AgreeItem key={index} defaultChecked={this.getChecked(item.value)} onChange={() => { this.handelChange(item.value); }}> {item.label} </AgreeItem> </Flex.Item> ); })} </div> ); } }