antD4+,modal Form,成功示例；

Question

有同学要的可以参考；谢谢老师的帮助。
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>
    );
}

}

Answer 1

河畔一角 2020-03-13 18:40:07

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

• 提问者 慕容4009360 #1

  非常感谢！

• syy138 #2

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

Answer 2

提问者 慕容4009360 2020-03-13 18:43:37

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

Answer 3

河畔一角 2020-03-27 19:15:45

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

表单初始化值：

this.formRef.current.setFieldsValue({ 

      note: 'Hello world!',      

      gender: 'male',   

});

• moonWanwan #1

  老师，将form单独写一个组件绑定ref后
  
  <Modal
            visible={this.state.isShowOpenCity}
            destroyOnClose={true}
            title="开通城市"
            onCancel={() => {
              this.setState({
                isShowOpenCity: false
              })
            }}
            onOk={this.handleSubmit}
          >
            <OpenCityForm ref={this.cityForm} />
          </Modal>
  
  let userInfo = this.cityForm.current.getFieldsValue();
  
  报this.cityForm.current.getFieldsValue is not a function