react antd 报错TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function解决方法1、看是不是antd版本的问题，新版本已经废弃create2、如果排除版本以及编写逻辑都正确，一定要去检查一下单词是否拼错、大小写问题等不容易被发现的细节export default Form.create({name: 'loginForm'})(Login);

react+antd Form表单的使用、验证 antd Form表单高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。例子：import React from 'react' import { Form, Input, Button, Checkbox } from 'antd'; import { UserOutlined, LockOutlined, BarcodeOutlined } from '@ant-design/icons'; function Login(props) { const onFinish = (values) => { console.log('Success:', values); }; return ( <div className="login-box"> <div className="login-min"> <div className="avatar_box"> <img src="https://www.tpxhm.com/fdetail/logo192.png" alt="" /> </div> <Form name="normal_login" className="login-form" onFinish={onFinish}> <Form.Item name="username" rules={[{ required: true, message: '请输入账号' }]} className="username" > <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" size="large"/> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" className="login-form-button" size="large">登录</Button> </Form.Item> </Form> </div> </div> ) } export default Login表单获取值通过const onFinish = (values) => { console.log('Success:', values); };Form 具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择自行处理数据。动态校验规则根据不同情况执行不同的校验规则。<Form.Item {...formItemLayout} name="nickname" label="Nickname" rules={[ { required: checkNick, message: 'Please input your nickname', }, ]} > <Input placeholder="Please input your nickname" /> </Form.Item> const [form] = Form.useForm(); const [checkNick, setCheckNick] = useState(false); useEffect(() => { form.validateFields(['nickname']); }, [checkNick]);

react封装axios请求接口 我们每次都要请求数据，为了方便后期的维护和修改，我们可以对axios请求进行分装1、 安装axios插件npm isntall axios –save2、 新建request.js文件，用于封装axiosimport axios from "axios"; import { getToken } from './auth' const instance = axios.create({ baseURL: 'http://vue.tpxhm.top/', timeout: 5000 }) // 添加请求拦截器 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.headers['token'] = getToken() return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(function (response) { // 对响应数据做点什么 return response.data; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); /** * get请求 * @param {*} url 请求地址 * @param {*} param url参数 */ export function get(url, params){ return instance.get(url,{ params }) } /** * post请求 * @param {*} url 请求地址 * @param {*} data url参数 */ export function post(url, data){ return instance.post(url,data) } /** * put请求 * @param {*} url 请求地址 * @param {*} data url参数 */ export function put(url, data){ return instance.put(url,data) } /** * del请求 * @param {*} url 请求地址 */ export function del(url){ return instance.del(url) }2、 编写请求接口文件searvice.js// 服务端请求import { get, post, put, del } from '../utils/request' /** * 用户登录 * @param {*} user * @returns */ export function loginApi(user){ return post('api/login', user) }3、 接口请求实例loginApi({ username: values.username, password: values.password, }).then(res=>{ console.log(res) }).catch(err=>{ console.log(err) })

react+antd实现图片上传预览功能 效果展示：文件选择上传和拖拽上传控件Upload上传页面代码部分：import React, {useEffect, useState} from 'react' import { Breadcrumb, Upload, message, Image, BarcodeOutlined} from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; function Add() { return ( <div> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>主页</Breadcrumb.Item> <Breadcrumb.Item>文章添加</Breadcrumb.Item> </Breadcrumb> <Upload name="img" listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" onChange={info=>handleChange(info)} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> </div> ) } export default Add2、逻辑方法部分代码：const [imageUrl, setImageUrl] = useState('') const [loading, setLoading] = useState(false) const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); const handleChange = info => { if (info.file.status === 'uploading') { setLoading(true) return; } if (info.file.status === 'done') { // Get this url from response in real world. setLoading(false) console.log(info) setImageUrl(info.file.response.url) } };3、完整案例：import React, {useEffect, useState} from 'react' import { Breadcrumb, Upload, message, Image, BarcodeOutlined} from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; function Add() { const [imageUrl, setImageUrl] = useState('') const [loading, setLoading] = useState(false) const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); const handleChange = info => { if (info.file.status === 'uploading') { setLoading(true) return; } if (info.file.status === 'done') { // Get this url from response in real world. setLoading(false) console.log(info) setImageUrl(info.file.response.url) } }; return ( <div> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>主页</Breadcrumb.Item> <Breadcrumb.Item>文章添加</Breadcrumb.Item> </Breadcrumb> <Upload name="img" listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" onChange={info=>handleChange(info)} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> </div> ) } export default Add

React如何使用Braft Editor符文本编辑器 Braft Editor符文本编辑器，美观好用的React富文本编辑器。官网地址：http://braft.margox.cn/1、安装使用npm或者yarn来将本编辑器加入到你的项目中：# 使用npm安装npm install braft-editor --save# 使用yarn安装yarn add braft-editor2、使用编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：2.1、页面代码部分<Form.Item> <BraftEditor value={editorState} onChange={(e)=>handleEditorChange(e)} /> </Form.Item>通过onChange={(e)=>handleEditorChange(e)}绑定方法获取值2.2、引入编辑器组件// 引入编辑器组件 import BraftEditor from 'braft-editor' // 引入编辑器样式 import 'braft-editor/dist/index.css'2.3、编辑器值获取和定义//富文本编辑器 const [editorState, serEditorState] = useState(BraftEditor.createEditorState("")) const handleEditorChange = values=> { console.log(values) serEditorState(values); } const handleSubmit = e =>{ // 获取富文本的内容 console.log(editorState.toHTML()) }通过editorState.toHTML()还直接获取富文本编辑器内容实例：import React, {useEffect, useState} from 'react' import { Breadcrumb, Form, Image, Button} from 'antd'; // 引入编辑器组件 import BraftEditor from 'braft-editor' // 引入编辑器样式 import 'braft-editor/dist/index.css' function Add() { //富文本编辑器 const [editorState, serEditorState] = useState(BraftEditor.createEditorState("")) const handleEditorChange = values=> { console.log(values) serEditorState(values); } const handleSubmit = e =>{ // 获取富文本的内容 console.log(editorState.toHTML()) } return ( <div> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>主页</Breadcrumb.Item> <Breadcrumb.Item>文章添加</Breadcrumb.Item> </Breadcrumb> <Form name="basic "onFinish={handleSubmit}> <Form.Item> <BraftEditor value={editorState} onChange={(e)=>handleEditorChange(e)} /> </Form.Item> <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> 保存 </Button> </Form.Item> </Form> </div> ) } export default Add