Button HtmlType 在 React Antd 中的实践不用写 form.resetFieldsValue() 辣

定义

Button 组件的 htmlType 属性用于指定按钮的 HTML 表单类型。这个属性可以控制按钮在表单提交时的行为。
常见的 htmlType 值包括：
submit：将按钮作为表单的提交按钮。当用户点击该按钮时，会触发表单的提交操作。
reset：将按钮作为表单的重置按钮。当用户点击该按钮时，会将表单中的输入字段重置为初始值。
button：将按钮作为普通按钮。这是默认的 htmlType 值，点击该按钮不会触发表单提交或重置操作。

实践

在 React 组件库 Antd 中的实践，以 Form 表单为例：

 <Form {...layout} onFinish={onFinish}>
            <Row gutter={24}>
              <Col sm={6}>
                <Form.Item label="ID" name="id" key="id">
                  <InputNumber style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              {SearchBuilder(init.data?.layout.tableColumn)}
            </Row>
            <Row>
              <Col sm={24} className={styles.textAlignRight}>
                <Space key="space">
                  <Button type="primary" htmlType="submit" key="submitButton">
                    Submit
                  </Button>
                  <Button
                    htmlType="reset"
                    onClick={() => {
                      init.run();
                    }}
                    key="clearButton"
                  >
                    Clear
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>

Tips

• form.resetFieldsValue() 可以被 htmlType=“reset” 替换 这样就省去用 Form.useForm()
• 根据具体情况选择使用一种即可，让代码更简洁优雅