andt3.0

首先 在class组件里面

import React from ‘react’
import { Form, Icon, Input, Button, Checkbox } from ‘antd’
//这个是关于编辑的 先创建一个Form 在 mapPropsToFields 里面进行编辑（回填）

export default @Form.create({
  mapPropsToFields(props) {
    const obj = { username : '不知道', password : '123' }
    //因为格式不一样 有多 所以我们要用 reduce 函数
    return Object.keys(obj).reduce((v0,v1) => {
      v0[v1] = Form.createFormField({
        value: obj[v1],
      })
      return v0 //返回
    },{})
  }
})
class NormalLoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  };
 
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
        //username 这个是名字
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名"//页面显示的名字
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="密码"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

关于定制主体 在最外面的文件夹里的config-overrides.js文件中 加一个

const modifyVars = require('./src/utils/antd')

// 支持 antd 主题定制

addLessLoader({
      javascriptEnabled: true,  //支持定制
      modifyVars, //定制的样式  因为如果要是太多 不好看 所以要先一 node的方式进行引入
    }),

在 ./src/utils/antd 这里面中我们要放入一下样式
例如

以 module.exports 的方式进行抛出

module.exports = {
  '@input-color':'#F00',
}

同时antd3.0也支持国际化

import zhCN from ‘antd/es/locale/zh_CN’;//表示中文

return (
//包起来


);