React Antd Form 表单提交按钮时 onFinish 回调函数获取不到表单的值的问题

最新推荐文章于 2024-02-08 16:29:39 发布

zoe_ya

最新推荐文章于 2024-02-08 16:29:39 发布

阅读量1.6k

点赞数

文章标签： react.js javascript 前端 typescript antd

本文链接：https://blog.csdn.net/Constantiny/article/details/130808167

版权

在这里插入图片描述

问题

在一个复杂表单的提交时，发现 onFinish 回调函数能执行，但是里面获取不到当前表单保存的值

解决

之前写法是

const onFinish = (values: any) => {
...
...
...
}

 <Form
        form={form}
        initialValues={...}
      >
       ...
       ...
       ...
        <Row justify="center" gutter={12} style={{ marginTop: 20 }}>
          <Col>
            <Form.Item>
              <Button type="primary" onclick = { onFinish }>
                保存
              </Button>
            ...
            ...
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>

修改为

 <Form
        form={form}
        onFinish={onFinish}
        initialValues={...}
      >
       ...
       ...
       ...
        <Row justify="center" gutter={12} style={{ marginTop: 20 }}>
          <Col>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            ...
            ...
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>