react获取表单form对象的两种方式,获取form后进行重置

  • 1.函数组件
const CreateForm: React.FC<CreateFormProps> = (props) => {
     
    const [form] = Form.useForm();
  	useEffect(() => {
     
    	form.setFieldsValue({
     ...initialValues});
  }, [])

return <Form form={
     form}
            onFinish={
      this.onFinish }
            onFinishFailed={
      this.onFinishFailed }
          >
          </Form>

  • 2 class Component下
class AddProduct extends React.Component<PropsType> {
     
  formRef = React.createRef<FormInstance>();
  
  setDefaultVals = () =>{
     
        this.formRef.current.setFieldsValue({
     ...initProduct});  
  }
  render() {
     
    return (
      <div>
        <Button type="link" onClick={
      this.setDefaultVals }>
          设置默认值
        </Button>
       
          <Form
            ref={
     this.formRef}
            onFinish={
      this.onFinish }
            onFinishFailed={
      this.onFinishFailed }
          >
          {
     ...}
          </Form>
          </div>

}

你可能感兴趣的:(ant.design,React)