Skip to content

Instantly share code, notes, and snippets.

@devalexandre
Created June 15, 2017 21:48
Show Gist options
  • Select an option

  • Save devalexandre/e9da23a6f0cfa231e852fef5842e30b4 to your computer and use it in GitHub Desktop.

Select an option

Save devalexandre/e9da23a6f0cfa231e852fef5842e30b4 to your computer and use it in GitHub Desktop.
import React from 'react'
import { Form, Icon, Input, Button } from 'antd';
const FormItem = Form.Item;
class Contato extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('message', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="textarea" placeholder="msg" autosize={{ minRows: 2, maxRows: 6 }} />
)}
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <a href="">register now!</a>
</FormItem>
</Form>
);
}
}
export default Contato
@xyzdata
Copy link

xyzdata commented Jul 5, 2017

// Form.create({})(???);
const ContatoForm = Form.create({})(Contato);

export {ContatoForm};
export default ContatoForm;

@jnosornov
Copy link

Ho did you manage to import antd components like...
import { Form } from 'antd'
Already saw the documentation, and I am trying to use babel-plugin-import, installed and added the plugin inside webpack-config, but it does not work yet, could you give me some advice about it.

// > JS / JSX
			{
				test: /\.(js|jsx)?$/,
				loader: 'babel-loader',
				include: [APP_FOLDER],
				exclude: /(node_modules)/,
				options: {
					plugins: [
						["import", { libraryName: "antd", style: "css" }]
					],
					presets: ['es2015', 'react', 'stage-2'],
				},
			},

@jnosornov
Copy link

Did you manage to solve the getFieldDecorator issue?... same issue here.

@tellen7
Copy link

tellen7 commented May 6, 2018

see this issue, I solve this problem.

component Contato should be wrapped by Form.create()(), so change L53 to export default Form.create()(Contato)

haha! So late.....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment