online/src/case/ShopApp/src/components/AddressPage/FormAddress.jsx

import React, { Component } from 'react'

import { List, InputItem, WhiteSpace ,Picker,PickerView} from 'antd-mobile';
import { createForm } from 'rc-form';
import './FormAddress.css'


import {province} from './areaData'



export default class FormAddress extends Component {
  constructor(props){
      super(props)

      this.state={
          areaShow:false
      }

      this.trigger=this.trigger.bind(this)
  }

  trigger(){
    this.setState({
        areaShow:!this.state.areaShow
    })
  }
  render() {
    //const { getFieldProps } = this.props.form;
    return (
      <form>
      <List renderHeader={''}>
      <InputItem
        placeholder="姓名" 
        type="bankCard"
      >收货人</InputItem>
      <InputItem
        type="phone"
        placeholder="手机号码"
      >手机号码</InputItem>
      <InputItem
        editable={false}
        type="password"
        placeholder="点击选择地区"
        extra={'>'}
        onClick={this.trigger}
      >选择地区</InputItem>
      <InputItem
        type="number"
        placeholder="详细地址"
      >详细地址</InputItem>
      <InputItem
        type="digit"
        placeholder="邮编"
      >邮编</InputItem>
    </List>
        <div className='pickerWrap' style={this.state.areaShow ? {}:{display:"none"}}>
            <PickerView
                data={province}
                value={['02', '02-1', '02-1-1']}
                onChange={(e)=>{console.log(e)}}
            />
        </div>
      </form>
    )
  }
}