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.stateconst  result = await reqCategorys(parentId)this.setState({loading:false})if(result.status===0){//取出分类数组，可以是一级的也可能是二级的const categorys = result.dataif(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 = categorythis.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.stateconst 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}><TableborderedrowKey='_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.useFormexport 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>);}
}

这是完整的代码。

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

VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
P13: * Component组件拆分、子组件向父组件传递数据
React16 基础阐述新建服务菜单组件父组件向子组件传值子组件向父组件传递数据 warning警告获取数组索引下标子组件调用父组件方法预览最终效果 index.js Xiaojieji ...
vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
Vue2.x中的父组件数据传递至子组件
父组件结构 template <template><div><v-girl-group :girls="aGirls"></v-girl- ...
vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
父html向子html传递参数,子组件向父组件传值
react 子组件怎么向父组件传值 Vue中子组件给父组件传值,父组件接收不到 vue组件在html声明的事件尽量不要用大写的哈,会被解析成小写的,因为html属性是大小写不敏感的另外调用的函数要生 ...
Vue父组件传给子组件数据,子组件得不到数据解决方法
目录第一种方案 (1)数据为数组时候父组件子组件 (2)数据为对象时候父组件子组件 (3)数据为数字时候父组件子组件 (4)数据为字符串时候父组件子组件第二种方案 ...

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

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

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

最新文章

热门文章