problem description

React does not recognize the htmlType prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase htmltype instead. If you accidentally passed it from a parent component, remove it from the DOM element.

the environmental background of the problems and what methods you have tried

look at others and say redundancy, but no redundancy is found

related codes

/ / Please paste the code text below (do not replace the code with pictures)
import React, {Component} from "react"
import Header from ".. / headerLayout/header"
import {Form} from "antd";
import {Button, Icon, InputItem} from "antd-mobile";
export default class LoginLayout extends Component {

handleSubmit = (e) => {
    console.log(111)
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if (!err) {
            console.log("Received values of form: ", values);
        }
    });
}

render() {
    const {getFieldDecorator} = this.props.form;
    return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Header tabName=""/>

                <Form.Item>
                    {getFieldDecorator("userName", {
                        rules: [{required: true, message: "Please input your username!"}],
                    })(
                        <InputItem prefix={<Icon type="user" style={{color: "rgba(0,0,0,.25)"}}/>}
                               placeholder=""/>
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator("password", {
                        rules: [{required: true, message: "Please input your Password!"}],
                    })(
                        <InputItem prefix={<Icon type="lock" style={{color: "rgba(0,0,0,.25)"}}/>} type="password"
                               placeholder=""/>
                    )}
                </Form.Item>
                <Form.Item>
                    {/*{getFieldDecorator("remember", {*/}
                        {/*valuePropName: "checked",*/}
                        {/*initialValue: true,*/}
                    {/*})(*/}
                        {/*<Checkbox>Remember me</Checkbox>*/}
                    {/*)}*/}
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        
                    </Button>
                </Form.Item>
            </Form>

    );
}

}
export const WrappedLoginLayout = Form.create () (LoginLayout);

what result do you expect? What is the error message actually seen?

now, submission doesn"t work. Although there are other ways to integrate data and send it, how to solve this problem