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

2

河畔一角

回复

千隼小白

不客气

2020-03-09

共2条回复

千隼小白

提问者

2020-03-04

这个我知道，但是现在antd升级到4.0之后，wrappedComponentRef 这个写法不能用了好像

0

1

河畔一角

antd升级到4.0后，不少语法被废除了，我目前正对antd做课程升级介绍，需要一段时间；大家有两种解决方法： 1. antd版本降级到3.4，也就是安装3.4的版本（推荐）； 2. 使用函数组件开发，结合hooks，这种对大家的学习成本较高；

2020-03-09

共1条回复

河畔一角

2020-03-04

获取表单的值，我们课程在前面讲过了，表单和modal是分开的两部分，表单是用Form.create创建的，获取值跟modal没有关系，您翻到前面看一下。

0

0