forgeplus-react/src/forge/users/Material/Base.jsx

import React , { forwardRef, useEffect } from 'react';
import { Form , Checkbox , Input, Radio , Button , Cascader } from 'antd';
import { AlignCenter } from '../../Component/layout';
import './Index.scss';
import { locData } from '../../Utils/locData';
import Axios from 'axios';

const { TextArea } = Input;
export default Form.create()(
  forwardRef((props)=>{
    const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
    // const { username } = props && props.match && props.match.params;
    const { resetUserInfo , current_user } = props;
    console.log(props);

    useEffect(()=>{
      if(current_user && current_user.login){
        setFieldsValue({
          ...current_user,
          location:current_user.province && [current_user.province,current_user.city]
        })
      }
    },[current_user])

    function submit() {
      validateFields((error,values)=>{
        if(!error){
          submitFunc(values);
        }
      })
    }

    function submitFunc(values) {
      const url = `/users/${current_user && current_user.login}.json`;
      const params={
        user: {
          nickname: values.nickname,
          user_extension_attributes: {
            province: values.location && values.location[0],
            city: values.location && values.location[1],
            ...values
          }
        }
      }
      Axios.put(url,params).then(result=>{
        if(result && result.data){
          props.showNotification("资料修改成功！")
          resetUserInfo && resetUserInfo();
        }
      }).catch(error=>{})
    }

    return(
      <Form layout={'inline'} className="formBase">
        <Form.Item label="邮箱">
          {getFieldDecorator("email",{
            rules:[{required:true,message:"请输入邮箱账号"}]
          })(
            <Input placeholder="请输入您的邮箱账号" disabled style={{width:"400px"}}/>
          )}
        </Form.Item>
        <Form.Item label="">
          {getFieldDecorator("show_email",{
            rules:[],
            valuePropName:"checked"
          })(
            <Checkbox>在个人主页展示</Checkbox>
          )}
        </Form.Item>
        <Form.Item label="姓名">
          {getFieldDecorator("nickname",{
            rules:[{required:true,message:"请输入姓名"}]
          })(
            <Input placeholder="请输入您的姓名" maxLength={20} style={{width:"400px"}}/>
          )}
        </Form.Item>
        <div>
          <Form.Item label="性别">
            {getFieldDecorator("gender",{
              rules:[{required:true,message:"请选择性别"}]
            })(
              <Radio.Group>
                <Radio value={1}>男</Radio>
                <Radio value={0}>女</Radio>
              </Radio.Group>
            )}
          </Form.Item>
        </div>
        <Form.Item label="单位名称">
          {getFieldDecorator("custom_department",{
            rules:[{required:true,message:"请输入单位名称"}]
          })(
            <Input placeholder="请输入单位名称" maxLength={30} style={{width:"400px"}}/>
          )}
        </Form.Item>
        <Form.Item label="">
          {getFieldDecorator("show_department",{
            rules:[],
            valuePropName:"checked"
          })(
            <Checkbox>在个人主页展示</Checkbox>
          )}
        </Form.Item>
        <Form.Item label="地区">
          {getFieldDecorator("location",{
            rules:[]
          })(
            <Cascader placeholder="请选择省份城市" options={locData} style={{width:"400px"}}></Cascader>
          )}
        </Form.Item>
        <Form.Item label="">
          {getFieldDecorator("show_location",{
            rules:[],
            valuePropName:"checked"
          })(
            <Checkbox>在个人主页展示</Checkbox>
          )}
        </Form.Item>
        <Form.Item label="简介">
          {getFieldDecorator("description",{
            rules:[]
          })(
            <TextArea placeholder="请输入您的自我简介" rows={4} maxLength={140} style={{width:"600px"}}/>
          )}
        </Form.Item>
        <AlignCenter>
          <span className="ant-form-item-label"></span>
          <Button type={"primary"} onClick={submit}>提交</Button>
          {/* <Button type={"default"} onClick={()=>props.history.push(`/${current_user && current_user.login}`)} className="ml20">取消</Button> */}
        </AlignCenter>
      </Form>
    )
  })
)