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

修复表单onFinish回调获取不到值的问题

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

原创最新推荐文章于 2024-02-08 16:29:39 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端 #typescript #antd

在处理复杂表单提交时，发现onFinish回调函数执行但无法获取表单值。问题出在Button组件上，原本使用了onclick事件，改为使用htmlType=submit后，表单值能在onFinish中正确获取。

在这里插入图片描述

问题

在一个复杂表单的提交时，发现 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>
    </>