react 注册 form:类组件注册form,函数组件注册form

官方说明:https://ant.design/components/form-cn/#components-form-demo-basic

一、类组件注册 form

react 注册 form:类组件注册form,函数组件注册form_第1张图片

import { Form } from 'antd';
import { FormInstance } from 'antd/lib/form';

classDemo extends React.Component {
  formRef = React.createRef<FormInstance>();
  // 请求接口
  const getList = () => {
  	this.props.dispatch({
  		type: 'demoinfo/list',
  		payload: {}
  	}).finnaly(()=>{
  		const result = this.props.demoinfo.data
  		this.formRef.current.setFieldsValue(result) // 设置表单数据
  	})
  }
  // 重置表单
  onReset = () => {
    this.formRef.current.resetFields();
  };
  render() {
  	return(
  	  <Form ref={this.formRef}>
  	  </Form>
  	)
  }
}

二、函数组件注册 form

react 注册 form:类组件注册form,函数组件注册form_第2张图片

import { Form } from 'antd';

const Demo = () => {
  const [form] = Form.useForm(); // 注册表单
  // 请求接口
  const getList = () => {
  	this.props.dispatch({
  		type: 'demoinfo/list',
  		payload: {}
  	}).finnaly(()=>{
  		const result = this.props.demoinfo.data
  		form.setFieldsValue(result) // 设置表单数据
  	})
  }
  // 重置表单
  const onReset = () => {
    form.resetFields();
  };
  return(
  	<Form form={form}>
  	</Form>
  )
}

你可能感兴趣的:(antd)