react使用ref获取和修改form表单

本文介绍了如何在React中使用Modal组件展开表单页面,包括如何在Modal显示前设置初始值、清空表单和获取表单验证后的值。开发者通过`createRef`管理Form组件实例,并利用`setState`和`setFieldsValue`方法实现表单状态的控制。
摘要由CSDN通过智能技术生成

调用form页面

构造函数加入

  this.forms = React.createRef()

调用这里是用了Modal展开

              <Modal
                    title={"新增预警池"}
                    visible={visible}
                    confirmLoading={saveLoading1}
                    destroyOnClose={true}
                    cancelText="返回"
                    onCancel={this.handleCancel}
                    onOk={this.saveRecord}
                    okText="保存"
                    width={600}
                >
                <AddMessage ref={this.forms} orggData={orggData}  />
                </Modal>

设置form值

  const _this = this
  //visible: true,先渲染出表单页面才能设置值,保守起见使用了延时函数
  this.setState({ visible: true},
        ()=>{
            setTimeout(()=>{
          _this.forms.current.setFieldsValue({"driveName":value.indName,"driveId":value.indId,"drivePath":value.catalogIdPath});
            },10)
        })

清空form值

  const _this = this
  //visible: true,先渲染出表单页面才能设置值,保守起见使用了延时函数
  this.setState({ visible: true},
        ()=>{
            setTimeout(()=>{
                _this.forms.current.resetFields();
            },10)
        })

获取form值

  this.forms.current.validateFields((err, values) => {
            if (!err) {
              console.log(values)
            }
        })

form页面

this.props.form.setFieldsValue设置form值

import React from 'react'
import { Form, Input, Select,DatePicker,Icon,InputNumber,TreeSelect} from 'antd';
import { DModal } from "@/component/hydb"
import DirverIndex from "./indecatorcount/index"
import { itemconfigService} from "@/service"
import moment from "moment"
const { Option } = Select;
const { RangePicker } = DatePicker;
const { MonthPicker } = DatePicker
class AddMessageForm extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            visible:false,
            saveLoading:false,
            orggData:'',
            depts:[]
        }
    }

    componentDidMount() {
   
    }

    changeshow=(value)=>{
       console.log("value:::",value);
       this.setState({visible:false}) this.props.form.setFieldsValue({"driveName":value.indName,"driveId":value.indId,"drivePath":value.catalogIdPath})
    
    }
  
    render() {
        const { getFieldDecorator} = this.props.form;
        const {orggData}= this.props
        const { saveLoading,visible,depts} = this.state
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        };
        return (
            <div>
            <Form {...formItemLayout}>
                <Form.Item label="短板名称" >
                {getFieldDecorator('driveName', {
                    initialValue:'',
                    rules: [{ required: true, message: '必填项'}],
                })(<Input onClick={this.changeshow}}/>)}
                </Form.Item>
                <Form.Item label="单位名称">
                    {getFieldDecorator('compareObj', {
                    rules: [{required: true, message: '必填项',},]
                    })(<TreeSelect
                        dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
                        treeData={orggData}
                         treeCheckable={false}
                         showSearch
                         treeNodeFilterProp="title"
                         onChange={this.onChange}
                    />)}
                </Form.Item>
              
                <Form.Item label={"指标id"} style={{display:'none'}}>
                    {getFieldDecorator('driveId', {
                        rules: [{ required: false, message: '必填项'}],
                    })(<Input />)}
                </Form.Item>
             
                <Form.Item label={"指标路径"} style={{display:'none'}}>
                    {getFieldDecorator('drivePath', {
                        rules: [{ required: false, message: '必填项'}],
                    })(<Input />)}
                </Form.Item>
            </Form>
        </div>
        );
    }
}

const AddMessage = Form.create({ name: 'register' })(AddMessageForm);
  
export default AddMessage
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值