-
-
Save devalexandre/e9da23a6f0cfa231e852fef5842e30b4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
commented
Jul 5, 2017
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'],
},
},
Did you manage to solve the getFieldDecorator issue?... same issue here.
see this issue, I solve this problem.
component
Contatoshould be wrapped byForm.create()(), so change L53 to export defaultForm.create()(Contato)
haha! So late.....
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment