谷粒后台antd v4更新分类名称

修改你的 update-form.js
注意传的是this.formRef.current

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Form, Input } from "antd";

const { Item } = Form;

// 更新分类form组件
class UpdateForm extends Component {

  formRef = React.createRef();

  static propTypes = {
    categoryName: PropTypes.string,
    setForm: PropTypes.func,
  }

  componentDidMount(){
    //console.log(this.formRef);
    this.props.setForm(this.formRef.current);
  }

  render() {

    const { categoryName } = this.props;
    return (
      <Form ref={this.formRef}>
        <Item name="categoryName" initialValue={categoryName}>
          <Input placeholder="请输入分类名称"/>
        </Item>
      </Form>
    );
  }
}

export default UpdateForm;

category.js 关键处修改代码

// 更新分类
updateCategory = () => {
  this.form
    .validateFields()
    .then(async (values) => {
      // 1.隐藏弹框
      this.setState({
        showStatus: 0,
      });
      // 2.发请求更新
      const parentId = this.category._id;
      const { categoryName } = values;
      //this.form.resetFields();

      const result = await reqUpdateCategory({ parentId, categoryName });
      if (result.status === 0) {
        // 3.重新显示列表
        this.getCategorys();
      }
    })
    .catch((err) => {
      message.info("请输入分类名称");
    });
};

按照视频加上this.form.resetFields()之后,发现 Input 输入框仍然存在旧的缓存,具体的现象是:
第一次点击读取分类名称A 正确,再次点击 B分类名称,仍然是上一次获取的名称A缓存,现在再次点击 B分类名称,发现又能正确读取到 B名称。无语,搞了好久还是不行,下面是我的解决方案:

删除所有的this.form.resetFields(),修改渲染 UpdateForm 代码,

{showStatus ===2 ? <Modal
  title="更新分类"
  visible={showStatus === 2}
  onOk={this.updateCategory}
  onCancel={this.handleCancel}
  okText="确定"
  cancelText="取消"
>
  <UpdateForm categoryName={category.name} setForm={ form => this.form = form }/>
</Modal> : null}

问题解决了,代价是性能降低,你点击多少次修改分类按钮,UpdateForm 组件就会渲染多少次。

如果你有更好的解决方案,欢迎留言。


+++ 新增分类

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Form, Select, Input } from "antd";

const { Item } = Form;
const { Option } = Select;

// 添加分类form组件
class AddForm extends Component {
  formRef = React.createRef();

  static propTypes = {
    categorys: PropTypes.array, // 一级分类数组
    parentId: PropTypes.string, // 父分类的Id
    setForm: PropTypes.func,
  };

  componentDidMount() {
    this.props.setForm(this.formRef.current);
  }

  render() {
    const { categorys, parentId } = this.props;
    return (
      <Form ref={this.formRef}>
        <Item name="parentId" initialValue={parentId}>
          <Select>
            <Option value="0">一级分类</Option>
            {categorys.map((item) => {
              //console.log(item._id);
              return (
                <Option key={item._id} value={item._id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </Item>
        <Item
          name="categoryName"
          rules={[{ required: true, message: "请输入分类名称" }]}
        >
          <Input placeholder="请输入分类名称" />
        </Item>
      </Form>
    );
  }
}

export default AddForm;

category.js 添加分类方法

// 添加分类
  addCategory = async () => {
    this.form
      .validateFields()
      .then(async (values) => {
        // 1.隐藏弹框
        this.setState({
          showStatus: 0,
        });
        // 2.收集数据,发送请求
        const { parentId, categoryName } = values;
        // console.log(parentId);
        // console.log(categoryName);
        const result = await reqAddCategory(categoryName, parentId);
        if (result.status === 0) {
          // 3.重新显示列表
          if (parentId === this.state.parentId) {
            // 如果添加的是当前分类下的列表,则刷新,其他分类的不刷新
            this.getCategorys();
          } else if (parentId === "0") {
            // 在二级分类列表下添加一级分类,重新获取一级分类列表,但不需要显示
            this.getCategorys("0");
          }
        }
      })
      .catch((err) => {
        //console.log(err);
        message.info("请输入分类名称");
      });
  };


  • 4
    点赞
  • 7
    收藏
  • 打赏
    打赏
  • 21
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 21

打赏作者

_zlfan

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值