公司项目自定义组件(antd折叠面板+antd多选框)传值数问题解决方案

公司项目自定义组件传值数问题解决方案

2022/1/22 from gxc

公司需求在代码注释中

代码：

import React, { Component } from "react";
import { Collapse, Checkbox, Form, Button } from "antd";const { Panel } = Collapse;class CollapseSelectBoxDiv extends Component {constructor(props) {super(props);this.state = {CollapseSelectArray: []}}// 自定义组件内的多选框点击事件// 想要实现的是：当使用该自定义组件时当用户选择完外域平台后，最后生成一个数组对象/* 例： [ {title: '外域平台1',list: [{title:'人员库1'},.....]},..... ]*/checkChange = (e, index, Pvalue, Mvalue) => {console.log('Pvalue', Pvalue); //当前多选框的父组件(即当前打开的折叠面板的数据)console.log('Mvalue', Mvalue); //当前多选框的数据const newArray = [...this.state.CollapseSelectArray] // 当前state存储最终外域平台数据的字段if (e.target.checked) { // 当当前多选框为选中状态时let PtitleArray = []for(let i = 0;i < newArray.length;i ++){ // 遍历外域平台数据PtitleArray.push(newArray[i].title) // 将其平台数据生成一个新数组为后面判定是否已经选择过该平台做准备}if (PtitleArray.includes(Pvalue)) { // 判定已选中的平台中是否存在当前平台newArray.map((item) => { // 如果存在该平台则无需新增平台数组数据，只需在该平台数据的list数组中加入该多选框的数据即可if (item.title === Pvalue) { // 使用map循环进行判定和list中的数据插入并returnreturn item.list.push({ Mvalue })}})setTimeout(() => {  // 同步将数据返回回state中this.setState({CollapseSelectArray: newArray})})}else { // 如果当前平台未被选中过，即将该平台数据以及多选框的数据以{ title:'当前平台',list[当前多选框数据] }console.log('out')newArray.push({ title: Pvalue, list: [{ Mvalue }] })setTimeout(() => {this.setState({CollapseSelectArray: newArray})})}console.log('newArray true checked', newArray)}else { // 当当前多选框为未选中状态时，在newArray中删除该多选框数据for (let n = 0; n < newArray.length; n++) {if (newArray[n].title === Pvalue) {// 遍历newArray找到当前平台(因为当前为未选中的话之前必定为选中状态，即在newArray中有该平台以及这个数据。)newArray[n].list.map((item, index) => {// 在该平台数据的list中找到多选框的数据删掉if (item.Mvalue === Mvalue) {newArray[n].list.splice(index, 1)return (newArray[n].list)}})// 当该平台数据中的list数据为空时，意味着该平台下无被选中的数据，即该平台未被选中，即将该平台从newArray中删掉if(newArray[n].list.length === 0){newArray.splice(n)}}}console.log('newArray else checked', newArray)setTimeout(()=>{// 最后赋值statethis.setState({CollapseSelectArray: newArray})})}}render() {return (<Collapse onChange={this.changeCollapse}>{// console.log('this.props.parent',this.props.parent)this.props.parent.state.DownData.map((item, index) => {return (<Panel header={item.title} key={index}>{item.list.map((it, ix) => {return (<Checkbox key={ix} onChange={(e) => { this.checkChange(e, it.key, item.title, it.title) }} >{it.title}</Checkbox>)})}</Panel>)})}</Collapse>)}
}class FormShow extends Component {constructor(props) {super(props);this.state = {}}Submit = (e) => {e.preventDefault();this.props.form.validateFields((err, value) => {console.log('Form Value', value)})}render() {const { getFieldDecorator } = this.props.form;return (<Form onSubmit={this.Submit}><Form.Item label="请选择外域平台">{getFieldDecorator('CollapseSelect', {})(<CollapseSelectBoxDiv parent={this.props.parent} />)}</Form.Item><Form.Item><Button type='primary' htmlType="submit">完成</Button></Form.Item></Form>)}
}const CollapseSelectForm = Form.create({ name: 'CollapseSelectData' })(FormShow)export default CollapseSelectForm

显示样式：

欢迎各位修改问题，指出错误

🆗