将RefTreeWithInput组件又包了一层，在包裹组件的逻辑里再次调用onChange方法会报错，错误原因是组件内部是用分号来解析所有传入的字段的 #648
Description
环境及版本信息
-
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等字段