H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】antui的 Button组件,里面的 htmlType=“submit”,报错

问题描述

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.

问题出现的环境背景及自己尝试过哪些方法

看别人的说是 冗余,但是并没有发现 冗余

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
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);

你期待的结果是什么?实际看到的错误信息又是什么?

现在,提交不管用,虽然有其他方法整合数据并发送,但是这个问题该怎么解决呢

回答:

不清楚你使用的react是什么版本的
不顾根据错误信息可知 要你用htmltype代替htmlType

本文地址:H5W3 » 【前端问题精选】antui的 Button组件,里面的 htmlType=“submit”,报错

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址