React antd表单从报错到放弃

周大胖子 · 发表于 2020-10-28 11:00:52

本帖最后由周大胖子于 2020-10-28 14:55 编辑

先交代下环境：
react / umi / antd 且 react 使用了 createReactClass 的写法

问题表像:
那天我要使用antd 的表单，然后我就去复制官网上的表单源码[最简单的那种，然后我就凉了，对的就这么直接 ]
Warning: React does not recognize the `valuePropName` prop on a DOM element.
好了，先说问题表象：由于太TM乱了我决定放弃他好了写点简单的，把我放弃的代码放这，坐等下次继续

// 商标搜索的表单
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Button, Checkbox } from 'antd';
const layout = {
// 这是结构
labelCol: {
span: 6,
},
wrapperCol: {
span: 18,
},
};
const tailLayout = {
wrapperCol: {
offset: 6,
span: 18,
},
};
const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<React.Fragment>
<div>
<Form
{...layout}
name="basic"
// initialValues={{
// remember: true,
// }}
// onFinish={onFinish}
// onFinishFailed={onFinishFailed}
>
{/* 外围 form 表单直接报错 */}
{/* React does not recognize the `initialValues` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `initialvalues` instead. If you accidentally passed it from a parent component, remove it from the DOM element. */}
{/* 问题本质： react 关于在标签中自定义属性[驼峰命名且] 不被系统接受的问题 */}
{/* 如果不要Form标签里面的自定义属性，不报错，但是下面报错：Cannot read property 'call' of undefined */}
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
{/* 这一段加上，就会弹出警告React does not recognize the `valuePropName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `valuepropname` instead. If you accidentally passed it from a parent component, remove it from the DOM element. */}
{/* 意思是 valuePropName 没有被识别 */}
{/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item> */}
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</div>
</React.Fragment>
);
};
// ReactDOM.render(<Demo />, mountNode);
export default Demo;

复制代码

// 这是新闻的详情页
import React from 'react';
import "../../assets/style/laomo.css";
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import Demo from './form';
import { Row, Col, Divider } from 'antd';
// const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
// import { Form, Input, Button, Select ,Checkbox } from 'antd';
// const Search = createReactClass({
// render(){
// return (
// <section className="search-section">
// 这是商标查询页
// <div className="search-box ">
//
// <div id="sm"></div>
// {/* <Demo /> */}
// </div>
// </section>
// );
// }
// });
// ReactDOM.render(<Demo />, document.getElementById("sm"));
// ReactDOM.render(<Demo />, document.getElementById("sm"));
// export default Search;
class Search extends React.Component{
render(){
return (
<section className="search-section">
<div className="search-box ">
<Row justify="center" align="top" className="search-banner">
<Col span={4}>
</Col>
<Col span={16} className="search-banner-form">
<Demo></Demo>
</Col>
<Col span={4}>
</Col>
</Row>
</div>
</section>
);
}
}
export default Search;

复制代码

React antd表单 从报错到放弃

React antd表单从报错到放弃