美文网首页
获取form,ref---antd

获取form,ref---antd

作者: 懒懒猫 | 来源:发表于2022-03-25 18:03 被阅读0次

    无状态组件,获取form

    import { Form } from 'antd';
    export default () => {
      const [form] = Form.useForm();
    ...
      const onReset = () => {
     form.setFieldsValue({
            roadName: '',
          });
        form.resetFields();   // 重置表单
      };
    }
    return (
              <Form
                form={form}
             ...
              >
              </Form>
    )
    

    无状态组件,获取ref

    import React, { useEffect, useRef, useState } from 'react';
    
     export default (prop) => {
      const ref = useRef();
    useEffect(() => {
        ref.current.setFieldsValue(data);
      }, [data.id]);
    }
    
     return (
        <
          ...
          ref={ref}
          ...
        >
    )
    

    函数组件获取ref

    export default class BasicInfoForm extends Component {
      //初始化状态
      state = {
        //表单实例,可使用其调用表单组件方法
        formRef: React.createRef(),
        textInput: React.createRef(),
      },
     getInitFromInfo = () => {
    ...
          this.state.formRef.current.setFieldsValue({
              enterpriseNature: data.enterpriseNature, //测试主体单位性质
          });
    ...
    },
    
     onChange = (e) => {
              this.state.textInput.current.focus();
            // this.state.message.current.innerText
      };
    
    render() {
        //从state中结构获得所需的数据
        const {formRef,textInput } = this.state;
        return (
          <div id={Style.BasicInfoForm}>
              <lForm
                ref={formRef}
               ...
              ></Form>
               <TextArea
                   ref={textInput} />
    
          </div>
    
    }
    

    相关文章

      网友评论

          本文标题:获取form,ref---antd

          本文链接:https://www.haomeiwen.com/subject/xffdjrtx.html