antd4.x版本解决父组件传递给子组件值的时候动态显示initialValue值的问题

antd4.x版本解决父组件传递给子组件值的时候动态显示initialValue值的问题

例如，我要从父组件给子组件传递一个字符串，然后子组件显示出来，按照3.x的版本的写法无法更新显示，这是因为initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变，不能直接设置initialValue的值来改变。但是我们可以通过Form的resetFields()方法来解决这个问题，this.formRef.current.resetFields()，在子组件定义formRef = React.createRef()，在componentDidUpdate函数中调用就可以完美解决，下面上代码。父组件代码。

import React, {Component} from 'react';
import { Card, Table, Button,message,Modal } from 'antd';
import {PlusOutlined,ArrowRightOutlined} from '@ant-design/icons';
import LinkButton from "../../components/link-button";
import {reqCategorys} from "../../api";
import AddForm from "./add-form";
import UpdateForm from './update-form'

/*商品分类*/
export default class Category extends Component {

  state = {
    categorys: [],//一级分类列表
    subCategorys: [],//二级分类列表
    loading: false,
    parentId: '0',
    parentName: '',
    showStatus: 0,//标识添加/更新的确认框是否显示，0：都不显示，1：显示添加，2：显示更新
  }

  initColumns = () => {
    this.columns = [
      {
        title: '分类的名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '操作',
        width: 300,
        render: (category) => (//返回需要显示的界面标签
          <span>
            <LinkButton onClick={()=>this.showUpdate(category)}>修改分类</LinkButton>
            {/*如何向事件回调很熟传递参数*/}
            {this.state.parentId==='0' ? <LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton> : null}
          </span>
        ),
      },
    ];
  }

  //异步获取一级分类列表
  getCategorys = async () => {
    this.setState({loading:true})
    const {parentId} = this.state
    const  result = await reqCategorys(parentId)
    this.setState({loading:false})
    if(result.status===0){
      //取出分类数组，可以是一级的也可能是二级的
      const categorys = result.data
      if(parentId==='0'){
        this.setState({categorys})
      }else {
        this.setState({subCategorys:categorys})
      }
    }else {
      message.error('获取分类列表失败')
    }
  }

  //显示二级列表
  showSubCategorys = (category) => {
    this.setState({
      parentId:category._id,
      parentName:category.name,
    },()=>{
      //获取二级分类列表
      this.getCategorys()
    })
  }

  //显示一级分类列表
  showCategorys = () => {
    //更新为显示一级列表的状态
    this.setState({
      parentId: '0',
      parentName: '',
      subCategorys: [],
    })
  }

  //发ajax请求，执行异步任务
  componentDidMount() {
    this.getCategorys()
  }

  //响应点击取消，隐藏确认框
  handleCancel = () => {
    this.setState({
      showStatus: 0,
    })
  }

  //显示添加的确认框
  showAdd = () => {
    console.log('showAdd')
    this.setState({
      showStatus: 1,
    })
  }

  //添加分类
  addCategory = () => {
    console.log('addCategory')
  }

  //显示修改的确认框
  showUpdate = (category) => {
    //保存分类对象
    this.category = category
    this.setState({
      showStatus: 2,
    })
  }


  //更新分类
  updateCategory = () => {
    console.log('updateCategory')
  }

  //为第一次render准备数据
  UNSAFE_componentWillMount() {
    this.initColumns()
  }

  render() {
    const extra = (
      <Button onClick={this.showAdd} style={{backgroundColor:'green',color:'white'}}>
        {<PlusOutlined />}
        添加
      </Button>
    )
    const {categorys,subCategorys,parentId,parentName,loading,showStatus} = this.state
    const category =this.category || {}
    const title = parentId==='0' ? '一级分类列表' : (
      <span>
        <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
        <ArrowRightOutlined style={{marginRight:5}}/>
        <span>{parentName}</span>
      </span>
    )
    return (
      <Card title={title} extra={extra}>
        <Table
          bordered
          rowKey='_id'
          loading={loading}
          dataSource={parentId==='0' ? categorys: subCategorys}
          columns={this.columns}
          pagination={{defaultPageSize:5,showQuickJumper:true}}
        />;
        <Modal title="添加分类" visible={showStatus===1} onOk={this.addCategory} onCancel={this.handleCancel}>
          <AddForm/>
        </Modal>
        <Modal title="更新分类" visible={showStatus===2} onOk={this.updateCategory} onCancel={this.handleCancel}>
          <UpdateForm categoryName={category.name ? category.name : ''}/>
        </Modal>
      </Card>
    );
  }
}

子组件代码

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

const Item = Form.Item
// const [form] = Form.useForm



export default class UpdateForm extends Component {

   formRef = React.createRef()

  static propTypes = {
    categoryName:PropTypes.string.isRequired,
  }

  componentDidUpdate() {
    // this.formRef.current.setFieldsValue({
    //   categoryName: this.props.categoryName,
    // });
    // this.formRef.current.resetFields()
  }

  onFinish = () => {

  }

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

这是完整的代码。