react中antd表单获取值得方法:validateFields

react中antd表单获取值得方法:validateFields
    但是今天在代码中用this.props.form.validateFields()报错了,这是为什么呢,看了一下报错,说最新版本已经不支持这样写了。

解决方法:

    

<Modal title={this.props.title}

                    centered

                    visible={this.state.visible}

                    onOk={this.onClick.bind(this)}

                    onCancel={this.handleCancel.bind(this)}

                    okText={this.state.okText}

                    width={600}

                >

                    <div className="H500">

                        <Form

                            {...layout}

                            name="basic"

                            ref={ref => this.formRef = ref}  // 关键之处

                            initialValues={formData}

                        // onSubmit={this.onSubmit.bind(this)}

                        >

                            <Row>

                                <Col span={12}>

                                    <Form.Item label="集群"

                                        name="clusterId"

                                        rules={[{ required: true, message: '不能留空' }]}>

                                        <Select

                                            value={formData.clusterId}

                                            onChange={this.onChange.bind(this, 'jqType')}

                                        // ref={inputR}

                                        >

                                            {getJQList.length > 0 && getJQList.map((e) => {

                                                return (

                                                    <>{<Option value={e.value}>{e.title}</Option>}</>

                                                )

                                            })}

                                        </Select>

                                    </Form.Item>

                                </Col>

                                <Col span={12}>

                                    <Form.Item

                                        label="库名"

                                        name="dbName"

                                        rules={[{ required: true, message: '不能留空' }]}>

                                        <Select>

                                            {kmList.length > 0 && kmList.map((e) => {

                                                return (

                                                    <>{<Option value={e.value}>{e.title}</Option>}</>

                                                )

                                            })}

                                        </Select>

                                    </Form.Item>

                                </Col>

                            </Row>

                        </Form>

                    </div>

                </Modal>

this.formRef.setFieldsValue({ dbName: '' }) // 直接设置Form表单里面的name,    // 回显

let data = this.formRef.getFieldsValue() // 直接获取Form表单里面的                    // 获取

this.refs.addFrom.getFieldValue(‘name’)         ·                                                // 获取某一项

this.refs.addFrom.resetFields()                                                                           //  清空数据























    

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 背景 使用 Ant Design Pro 开发有一段时间了,表单作为后台系统常见的功能当然很有必要封装一下,减少代...
    anyesu阅读 13,449评论 15 8
  • 引用form是第三方插件ant插件,官网网址:https://ant.design/。用到的antd的版本是@2....
    神秘者007阅读 12,156评论 0 4
  • npm i antdnpm i react-router-dom react简介 React 起源于 Facebo...
    青争小台阅读 3,517评论 0 0
  • client,page和screen的区别? clientX,clientY是触摸点相对于viewport视口x,...
    change_22fa阅读 5,712评论 1 1
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 128,291评论 2 7

友情链接更多精彩内容