美文网首页
获取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