硅谷后台系统 Antd V4更新以及添加分类

硅谷后台系统 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('请输入分类名称')
      })

  }

根据视频里的方法做,还是存在bug。例如:第一次点击名称A的修改分类时,会正确读取;再次点击名称B的修改分类时,依然得到的是上一次点击的名称A的缓存,当再次点击名称B时,又可以正确读取到B名称。后来通过参考https://blog.csdn.net/void_fan/article/details/113945839得到了解决。

本人自己目前还是一名在校学生,对前端有浓厚的兴趣,所以前段时间刚看完尚硅谷的React教学,然后最近一直在跟着视频开发此项目;这是目前在开发中遇到的问题,所以分享给大家,希望可以给你们一些帮助。因为是第一次写文章,所以有做的不好的地方请谅解;此项目还没有完成,后期如果还有遇到坑的地方,我还会继续跟大家分享。我会把我的源码放在github上,有需要的可以查看。github地址

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值