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

最新推荐文章于 2024-09-17 16:27:00 发布

跳崖寻死的鸟

最新推荐文章于 2024-09-17 16:27:00 发布

阅读量4.2k

点赞数 1

分类专栏：笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_45676738/article/details/115961013

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在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