硅谷后台系统 Antd V4更新以及添加分类
因为AntdV4的更新,有很多方法与功能都已经废弃;所以我的代码和视频源码有些许不同,又不懂的地方可以与我私信,或者查阅官方文档。很多有坑的地方我都做了详细的注释。
1.1我们首先处理更新分类的组件,先修改你的UpdateForm.js中的代码
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { Form, Input } from 'antd'
//更新分类的form组件
class UpdateForm extends Component {
formRef = React.createRef();
static propTypes = {
categoryName: PropTypes.string.isRequired,
setForm: PropTypes.func.isRequired
}
// componentDidMount() {
// // console.log(this.formRef);
// // this.props.setForm(this.formRef.current);
// }
componentDidMount() {
// console.log(this.formRef);
this.props.setForm(this.formRef.current);
}
render() {
const { categoryName } = this.props
return (
<Form ref={this.formRef}>
<Form.Item
name="categoryName"
initialValue={categoryName}
rules={[
{ required: true, message: '分类名称必须输入' },
]}
>
<Input placeholder="请输入分类名称" />
</Form.Item>
</Form >
);
}
}
export default UpdateForm;
1.2 然后是在index.jsx关键出修改代码,视频里的文件名叫category.js
//更新分类
updateCategory = () => {
//进行表单验证,只有通过了才处理
this.form.validateFields().then(async (values) => {
//1.隐藏确认框
this.setState({
showStatus: 0,
})
//准备数据
const categoryId = this.category._id
// const categoryName = this.form.getFieldValue('categoryName')
const { categoryName } = values
//清除输入数据
this.form.resetFields()
//2.发送请求更新分类
const result = await allReq.reqUpdateCategory(categoryId, categoryName)
if (result.status === 0) {
//3.重新显示列表
this.getCategorys()
}
})
.catch((err) => {
message.info("请输入分类名称");
})
}
2.1 然后我们处理添加模块,比更新模块要复杂一点
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { Form, Input, Select } from 'antd'
const { Option } = Select
//添加分类的form组件
class AddForm extends Component {
formRef = React.createRef();
static propTypes = {
setForm: PropTypes.func.isRequired,
categorys: PropTypes.array.isRequired, //接收以及分类的数组
parentId: PropTypes.string.isRequired, //
}
componentDidMount() {
// console.log(this.formRef);
this.props.setForm(this.formRef.current);
}
render() {
return (
<Form ref={this.formRef}>
<Form.Item>
{/* ---请注意在此处,如果表单里包括了Input/Select(即一个表单里有多个控件),可以使用内嵌的Form.Item完成,
你可以给 Form.Item 自定义 style 进行内联布局,或者添加 noStyle 作为纯粹的无样式绑定组件
具体情况可以参考官方文档,见下方链接
https://ant.design/components/form-cn/#components-form-demo-complex-form-control
*/}
<p>所属分类:</p>
<Form.Item
noStyle
name="parentId"
initialValue={this.props.parentId}>
<Select value={this.props.parentId} style={{ width: "100%" }}>
<Option value='0'>一级分类</Option>
{
this.props.categorys.map((item) => {
return <Option key={item._id} value={item._id}>{item.name}</Option>
})
}
</Select>
</Form.Item>
</Form.Item>
<Form.Item>
<p>分类名称:</p>
{/* 此处有坑 */}
{/* ----注意 <Form.Item /> 只会对它的直接子元素绑定表单功能 */}
<Form.Item
noStyle
name="categoryName"
rules={[
{ required: true, message: '分类名称必须输入' },
]}
>
<Input placeholder="请输入分类名称" />
</Form.Item>
</Form.Item>
</Form>
);
}
}
export default AddForm;
2.2 然后是处理index.js中的修改关键代码
//添加分类
addCategory = async () => {
this.form.validateFields().then(async (values) => {
//隐藏确认框
this.setState({
showStatus: 0,
})
//准备数据
const { parentId, categoryName } = values
// console.log(parentId, categoryName);
// debugger
// const parentId = this.form.getFieldValue('parentId')
// const categoryName = this.form.getFieldValue('categoryName')
//清除输入数据
this.form.resetFields()
const result = await allReq.reqAddCategory(categoryName, parentId)
if (result.status === 0) {
//添加的分类就是当前分类列表下的分类
if (parentId === this.state.parentId) {
this.getCategorys()
} else if (parentId === '0') {
//在二级分类列表下添加一级分类,重新获取一级分类列表,但不需要显示以及列表
this.getCategorys('0')
}
}
})
.catch((err) => {
message.info('请输入分类名称')
})
}
本人自己目前还是一名在校学生,对前端有浓厚的兴趣,所以前段时间刚看完尚硅谷的React教学,然后最近一直在跟着视频开发此项目;这是目前在开发中遇到的问题,所以分享给大家,希望可以给你们一些帮助。因为是第一次写文章,所以有做的不好的地方请谅解;此项目还没有完成,后期如果还有遇到坑的地方,我还会继续跟大家分享。我会把我的源码放在github上,有需要的可以查看。github地址