谷粒后台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("请输入分类名称");
      });
  };