1.邏輯代碼

/**
 * 添加用戶
 */
import React,{PureComponent} from ‘react‘
import {Card,Form,Input,Select,Button} from ‘antd‘
import {connect} from ‘react-redux‘

/**
 *  用戶列表
 */

const FormItem = Form.Item;

const Option = Select.Option;

@Form.create()
class UserAdd extends PureComponent{
  // 生命周期--組件加載完畢
  componentDidMount(){
    // this.props.changetitle("用戶管理—添加")
  }

  render(){
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };
  
    return(
      <Card bordered={false}>
        <Form layout="horizontal">
          {/*賬號*/}
          <FormItem {...formItemLayout} label="賬號">
            {getFieldDecorator(‘account‘, {
              rules: [{
                required: true, message: ‘請輸入賬號‘,
              }],
            })(
              <Input placeholder="請輸入賬號" />
            )}
          </FormItem>
          {/*姓名*/}
          <FormItem {...formItemLayout} label="姓名">
            {getFieldDecorator(‘name‘, {
              rules: [{
                required: true, message: ‘請輸入姓名‘,
              }],
            })(
              <Input placeholder="請輸入姓名" />
            )}
          </FormItem>
          {/*狀態*/}
          <FormItem {...formItemLayout} label="狀態">
            {getFieldDecorator(‘state‘, {
              rules: [{
                required: true, message: ‘請選擇狀態‘,
              }],
              initialValue:"0",
            })(
              <Select >
                <Option value="0">禁用</Option>
                <Option value="1">啟用</Option>
              </Select>
            )}
          </FormItem>
          {/*提交|保存按鈕*/}
          <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
            <Button type="primary" htmlType="submit" >
              提交
            </Button>
            <Button style={{ marginLeft: 8 }}>保存</Button>
          </FormItem>
        </Form>
      </Card>
    )
  }
}

export default connect ((state)=>(
  {
    state
  }
))(UserAdd)

2.效果圖

ant-design 實現 添加頁面