antD4+,modal Form,成功示例；

来源：8-3 开通城市实现

慕容4009360

2020-03-13

有同学要的可以参考；谢谢老师的帮助。
import React from “react”;
import {Card, Form, Input, Button, Modal} from “antd”;
const FormItem = Form.Item;

export default class FormRef extends React.Component {
formRef = React.createRef();

state = {
    visible: false
};

setVisible = (visible) => {
    this.setState({
        visible: visible
    })
};

handleSubmit = (values) => {
    let userInfo = this.formRef.current.getFieldsValue();
    console.log(userInfo);
};

handleShowModal = () => {
    this.setVisible(true)
};

render() {
    return (
        <div>
            <Button onClick={this.handleShowModal}>show modal</Button>
            <Card title="登录水平表单" style={{marginTop: 10}}>

            </Card>
            <Modal
                visible={this.state.visible}
                onOk={this.handleSubmit}
                onCancel={this.setVisible.bind(this,false)} //注意这里要用上bind
            >
                <Form style={{width: 300}} ref={this.formRef}>
                    <FormItem name="username">
                        <Input placeholder="请输入用户名"/>
                    </FormItem>
                    <FormItem name="password">
                        <Input type="password" placeholder="请输入密码"/>
                    </FormItem>
                </Form>
            </Modal>
        </div>
    );
}

}

写回答

3回答

河畔一角

2020-03-13

已采纳

非常棒，学习就是要多分享。

syy138

老师我有个疑问就是为什么js文件里也可以写html，不是这种应该用jsx吗？

2024-08-05

共2条回复

慕容4009360

提问者

2020-03-13

可以在modal里destroyOnClose={true}销毁，可以清除原有填写的数据

河畔一角

2020-03-27

表单重置：this.formRef.current.resetFields();

表单初始化值：

this.formRef.current.setFieldsValue({

note: 'Hello world!',

gender: 'male',

});

moonWanwan

老师，将form单独写一个组件绑定ref后 { this.setState({ isShowOpenCity: false }) }} onOk={this.handleSubmit} > let userInfo = this.cityForm.current.getFieldsValue(); 报this.cityForm.current.getFieldsValue is not a function

2020-12-09

共1条回复

React全家桶+AntD共享单车后台管理系统开发

React全家桶+AntD框架+大量前沿技术

1142 学习 · 495 问题

查看课程

相似问题

老师您好，在antD 4.0 里的modal嵌套表单取值问题

回答 3

antd 4 下如何在class component下让主对象获取子对象的ref

回答 1

antd4.0 form表单的封装内容会更新吗

回答 1

axios请求form-data的问题

回答 4

老师是不是现在上传图片都会503跨域问题？

回答 1

打开慕课网App查看更多内容