3回答

河畔一角

2020-03-09

关于class组件在Antd4.0版本中的用法，我先简单给大家一个Demo，各位如果使用的是最新版本，那么代码需要做相应的调整，因为有不少语法都已经废除了。

import React from "react";

import { Card, Form, Input, Button} from "antd";

const FormItem = Form.Item;

export default class FormLogin extends React.Component{

    formRef = React.createRef();

    componentDidMount() {

        this.formRef.current.setFieldsValue({

            username: 'Bamboo',

        });

    }

    handleSubmit = (values)=>{

        let userInfo = this.formRef.current.getFieldsValue();

        console.log(userInfo);

    }

    render(){

        return (

        <div>

            <Card title="登录水平表单" style={{marginTop:10}}>

                <Form style={{width:300}} ref={this.formRef}>

                    <FormItem name="username">

                        <Input placeholder="请输入用户名"  />

                    </FormItem>

                    <FormItem name="password" >

                        <Input type="password" placeholder="请输入密码" />

                    </FormItem>

                    <FormItem>

                        <Button type="primary" onClick={this.handleSubmit}>登录</Button>

                    </FormItem>

                </Form>

            </Card>

        </div>

        );

    }

}

0

0

河畔一角

2020-03-09

目前AntD已经更新到4.0了，可能不少同学都是基于最新版本来学习，但是官方已经废除了Form.create方法，所以，我后面会对这门课程升级和视频录制，需要一段时间；
建议大家：

1. 不要安装4.0的antd，可以保持之前的语法不动；（推荐）

2. 安装最新版本，但是需要学习函数组件和Hooks功能，成本较高。（不推荐）
   

0

0

河畔一角

2020-03-09

看起来可能是版本问题，你在课程群里找一下我，我单独看一下。这个截图信息不够全面。

0

2

河畔一角

回复

坚强的波波

目前3.4版本的语法就是截图这个写法，antd新出了4.0的版本，给予React Hooks开发，一开始我以为你是采用的最新版本，导致的语法失效； create()去掉括号，这个我还未尝试过，你使用的是哪个版本的antd;

2020-03-09

共2条回复