将RefTreeWithInput组件又包了一层，在包裹组件的逻辑里再次调用onChange方法会报错，错误原因是组件内部是用分号来解析所有传入的字段的

[MINGXINICE]

环境及版本信息

• tinper-bee 版本号: 2.2.3

• 若使用单个组件，请标明该组件版本号：ref-tree：2.1.5,

• 当前项目中react的版本号：16.6.3

• 所使用的操作系统：Windows、Mac

• 所使用的浏览器：chrome

您所在的部门或项目名称：用友金融-产品研发部

描述这个问题: 我将RefTreeWithInput组件又包了一层，外层是被form容器包裹，因为希望form.validateFields对应获取到的字段是json格式的，所以我在包裹组件的逻辑里又调用了onChange方法，结果每次调用都报错，错误原因是内部是用分号来解析所有传入的字段

1、组件相关代码

我的封装：

class RefTree extends Component {
    constructor(props) {
        super(props);
        let defaultValue = JSON.stringify({ refname: '', refpk: '', refcode: '' });
        if(typeof props.value != 'undefined') {
            defaultValue = props.value;
        }
        this.state = {
            showLoading: false,
            filterData: [],
            treeData:[],
            value: defaultValue,
            matchData: this.changeValueData(JSON.parse(defaultValue)),
            checkStrictly: true
        };
    }

    get refPath(){
        return formatRefPath(this.props.refPath);
    }

    changeValueData = (value) => {
        let newArray = [];
        let {refpk, refname, refcode} = value;
        if (value.refpk) {
            if (refpk.indexOf(",") > -1) {
                let pkArr = refpk.split(",");
                let nameArr = refname.split(",");
                let codeArr = refcode.split(",");
                for (let i = 0; i < pkArr.length; i++) {
                    let obj = {
                        refpk: pkArr[i],
                        refname: nameArr[i],
                        refcode: codeArr[i],
                    };
                    newArray.push(obj)
                }
            } else {
                newArray.push(value)
            }
        }
        return newArray;
    };

    loadData = async () => {
        let refPath = this.refPath;
        const treeUrl = `/${refPath}/blobRefTree`;
        const { param } = this.props;
        let result = request(treeUrl, {
            method: 'get',
            param: {
                refCode: param.refCode,
            }
        });
        new Promise((resolve, reject) => {
            if (result) {
                resolve(result)
            } else {
                reject()
            }
        }).then((treeData) => {
            let { data: res={} } = treeData;
            if(typeof res.data != "undefined" && res.data.length > 0) {
                let data = res.data;
                this.setState({
                    treeData : data,
                })
            }
        }).catch((e) => {
            this.setState({
                showLoading: false,
                treeData: []
            });
            console.log(e)
        });
    }

    /**
     * @msg: 触发过滤搜索回调
     * @param {value}
     * @return:
     */
    filterUrlFunc = (value) => {
        let refPath = this.refPath;
        const treeUrl = `/${refPath}/blobRefTree`;
        const { param } = this.props;
        let result = request(treeUrl, {
            method: 'get',
            param: {
                refCode: param.refCode,
                content: encodeURI(value)
            }
        });
        new Promise((resolve, reject) => {
            if (result) {
                resolve(result)
            } else {
                reject()
            }
        }).then((treeData) => {
            console.log('treeData',treeData)
            let { data: res={} } = treeData;
            if(typeof res.data != "undefined" && res.data.length > 0) {
                let data = res.data;
                this.setState({
                    filterData : data,
                })
            }
        }).catch((e) => {
            this.setState({
                showLoading: false,
                filterData: []
            });
            console.log(e)
        });
    }

    /**
     * @msg: 参照内搜索框搜索回调
     * @param {value}
     * @return:
     */
    getRefTreeData = (value) => {
        let refPath = this.refPath;
        const treeUrl = `/${refPath}/blobRefTree`;
        const { param } = this.props;
        let result = request(treeUrl, {
            method: 'get',
            param: {
                refCode: param.refCode,
                content: encodeURI(value)
            }
        });
        new Promise((resolve, reject) => {
            if (result) {
                resolve(result)
            } else {
                reject()
            }
        }).then((treeData) => {
            console.log('treeData',treeData)
            let { data: res={} } = treeData;
            if(typeof res.data != "undefined" && res.data.length > 0) {
                let data = res.data;
                this.setState({
                    treeData : data,
                })
            }
        }).catch((e) => {
            this.setState({
                showLoading: false,
                treeData: []
            });
            console.log(e)
        });
    }

    /**
     * @msg: 打开参照按钮事件
     * @param {value}
     * @return:
     */
    canClickGoOn = () =>{
        this.loadData();
        return true;//必须要有
    }

    onSave = (record) => {
        let { onSave, onChange } = this.props;
        let refname = [];
        let refpk = [];
        let refcode = [];
        record.forEach((item)=>{
            refname.push(item.name);
            refpk.push(item.refpk);
            refcode.push(item.refcode);
        })
        let value = JSON.stringify({
            refname: refname.join(";"),
            refpk: refpk.join(","),
            refcode: refcode.join(",")
        })
        this.setState({
            matchData: record,
            value: value
        })
        onSave && onSave(record);
        //这样用会报错
        onChange && onChange( value, record)
    }
    //这样用会报错
    onChange = (value, record) => {
        let { onChange } = this.props;
        onChange && onChange( record, value)
    }

    footerBtnDomChange = (value) => {
        this.setState({
            checkStrictly: !value
        }, ()=>{
            this.loadData();
        })
    }

    /**
     * 控制非末级节点是否可选
     * @param record
     * @returns {boolean}
     */
    treeNodeDisabledFunc = (record) => {
        let status = this.props.treeNodeDisabledFuncStatus
        // treeNodeDisabledFuncStatus true: 开启校验，非末级不可选  false: 不开启校验，全都可选
        if(!status) {
            return false
        }
        if(typeof record.isLeaf != 'undefined' && record.isLeaf) {
            return false // 可以选择
        }
        return true //不可以选择
    }

    render() {
        let { title, btnFlag, param, placeHolderTrue, footerBtnDom, autoCheckStrictly } = this.props;
        const { filterData, treeData, showLoading, value, matchData, checkStrictly } = this.state;
        let refPath = this.refPath;

        //暂时固定、逻辑可变
        footerBtnDom = autoCheckStrictly ? <Checkbox colors="primary" onChange={this.footerBtnDomChange}>联选下级</Checkbox> : footerBtnDom;

        return (
            <Fragment>
                <Loading show={showLoading} container={this}/>
                <RefTreeWithInput
                    // value={value}
                    emptyBut={true}
                    strictMode={true}
                    modalProps={{animation:false}}
                    disabled={btnFlag === 2}
                    placeholder={placeHolderTrue==1?'':`请选择${title}`}
                    backdrop={false}
                    title={title}
                    param={param}
                    searchable={true}
                    multiple={true}
                    checkStrictly={checkStrictly}
                    treeNodeDisabledFunc={this.treeNodeDisabledFunc}
                    getRefTreeData={this.getRefTreeData}
                    treeProps={{mustExpandable:true}}
                    displayField='{refname}'
                    valueField='refpk'
                    refModelUrl= {{
                        treeUrl: `/${refPath}/blobRefTree`, //树请求
                    }}
                    filterUrlFunc={this.filterUrlFunc}
                    filterData={filterData}
                    matchUrl={`/${refPath}/matchPKRefJSON`}
                    footerBtnDom={footerBtnDom}
                    {...this.props}
                    matchData={matchData}
                    treeData={treeData}
                    onSave={this.onSave}
                    onChange={this.onChange}
                    canClickGoOn={this.canClickGoOn}
                >
                </RefTreeWithInput>
            </Fragment>
        )
    }
};

export default RefTree;

外层调用：

<FormItem label={"资产类型2"} >

            <RefTree
                rowData={typeof rowData !== 'undefined' && rowData}
                btnFlag={typeof btnFlag !== 'undefined' && btnFlag}
                disabled={assetsTypeDisabled}
                type={1}
                multiple={true}
                title={'资产类型2'}
                refPath={`${GROBAL_HTTP_CTX}/common-ref/`}
                onSave={(record) => {
                  if (record.length > 0) {
                    _this.setState({
                      productInfoDisabled: true,
                      productTypeDisabled: true,
                      assetRefInfo: {
                        refCode: record[0].asset_refcode,
                        title: record[0].name
                      }
                    })
                  } else {
                    _this.setState({
                      productInfoDisabled: false,
                      productTypeDisabled: false,
                      assetRefInfo: {
                        refCode: '',
                        title: ''
                      }
                    })
                  }
                }}
                autoCheckStrictly={true}
                param={{
                  refCode: 'valuation_assetsType'
                }}
                {...getFieldProps('valuationAssetsType', {
                  // initialValue: JSON.stringify({
                  //   refname: '',
                  //   refpk: ''
                  // }),
                  onChange(value, record) {
                    console.log('change value',value)
                    console.log('change record',record)
                  }
                })}
            />
          </FormItem>

2、报错信息

当前的行为：效果（可截图说明）及动作描述

每次onChange时，都会进入这个方法，然后报错误提示

期望的行为:

onChange时，可以传入用逗号分隔的refpk等字段