无状态组件,获取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>
}
网友评论