[TreeSelect] 多选,checkRelation为 unRelated, 自定义 triggerRender,triggerRender 中无法拿到已选中值
YyumeiZhang opened this issue · comments
YyumeiZhang commented
Is there an existing issue for this?
- I have searched the existing issues
Which Component
TreeSelect
Semi Version
2.56.3
Current Behavior
Expected Behavior
triggerRender 中拿到选中值,在 trigger 中正确回显
Steps To Reproduce
No response
ReproducibleCode
import React, { useState, useCallback, useMemo } from 'react';
import { TreeSelect, Button, Tag, TagInput } from '@douyinfe/semi-ui';
function Demo() {
const treeData = useMemo(() => [
{
label: '亚洲',
value: '亚洲',
key: '0',
children: [
{
label: '**',
value: '**',
key: '0-0',
children: [
{
label: '北京',
value: '北京',
key: '0-0-0',
},
{
label: '上海',
value: '上海',
key: '0-0-1',
},
],
},
],
},
{
label: '北美洲',
value: '北美洲',
key: '1',
}
], []);
const onValueChange = useCallback((value) => {
console.log('onChange', value);
});
const renderTrigger = useCallback((props) => {
const { value, onSearch, onRemove, inputValue } = props;
console.log('--value', value)
const tagInputValue = value.map(item => item.key);
const renderTagInMultiple = (key) => {
const label = value.find(item => item.key === key).label;
const onCloseTag = (value, e, tagKey) => {
onRemove(tagKey);
};
return <Tag style={{ marginLeft: 2 }} tagKey={key} key={key} onClose={onCloseTag} closable>{label}</Tag>;
};
return (
<TagInput
inputValue={inputValue}
value={tagInputValue}
onInputChange={onSearch}
renderTagItem={renderTagInMultiple}
/>
);
}, []);
return (
<TreeSelect
checkRelation="unRelated"
triggerRender={renderTrigger}
filterTreeNode
searchPosition="trigger"
multiple
treeData={treeData}
placeholder='Custom Trigger'
onChange={onValueChange}
style={{ width: 300 }}
/>
);
}
Environment
- OS:
- browser:
Anything else?
No response