Office UI Fabric React TagPicker новый элемент
Резюме
Кто-нибудь знает, как заставить UI Fabric React TagPicker добавить новый элемент, когда все, что было введено, не существует в предложениях?
Я собираюсь отправить запрос AJAX в службу, чтобы добавить новый элемент в бэкэнд.
Желаемая функциональность
Когда кто-то вводит в средство выбора что-то, чего нет в параметрах, у них должна быть возможность добавить это как новый параметр и вызвать другой код, чтобы добавить этот новый параметр во внутренний API.
Что я пробовал до сих пор
Мне удалось добавить кнопку на pickerSuggestionsProps.onRenderNoResultFound с обработчиком кликов, который будет запускать некоторый код для добавления ключевого слова, но это включает в себя подключение к onChange, чтобы отслеживать, что ввел пользователь, но это нарушает выбор предложений (когда onChange, пользователь не может выбирать предложения из списка, который отображается под средством выбора).
@LeonardoSeccia, мы говорим о офис-интерфейс-ткань-реагировать?
@fabriziobertoglio да
@LeonardoSeccia Я не могу разобраться в документации, возможно, это основная причина, по которой вопрос вообще остался без ответа. Он действительно плохо написан и на самом деле не включает в себя никакого кода. Не стесняйтесь редактировать и улучшать его. Я считаю, что на хорошо написанные вопросы всегда есть ответ.
Вот как кто-то другой решил эту проблему: github.com/OfficeDev/office-ui-fabric-react/issues/1001
Ответы 2
Я предложил улучшить этот контроль на GitHub.
Этот кодовый ключ, который я раздвоил из полученного мной ответа, показывает, как это делается в настоящий момент ...
const {
TagPicker, Fabric, mergeStyles
} = window.Fabric;
const _testTags: ITag[] = [
'black',
'blue',
'brown',
'cyan',
'green',
'magenta',
'mauve',
'orange',
'pink',
'purple',
'red',
'rose',
'violet',
'white',
'yellow'
].map(item => ({ key: item, name: item, isNewItem: false }));
const newItem = mergeStyles({ color: '#f00', background: '#ddf', padding: '10px' });
const existingItem = mergeStyles({ color: '#222', padding: '10px' });
class TagPickerBasicExample extends React.Component<{}, {}> {
private picker = React.createRef<IBasePicker<ITag>>();
public render() {
return <TagPicker
onResolveSuggestions = {this.onResolveSuggestions}
componentRef = {this.picker}
onRenderSuggestionsItem = {this.onRenderSuggestionsItem}
onItemSelected = {this.onItemSelected}
/>;
}
private onRenderSuggestionsItem = (props: any, itemProps: any): JSX.Element => {
console.info({props, itemProps})
return <div className = {props.isNewItem ? newItem : existingItem} key = {props.key}>
{props.name}
</div>;
};
private onResolveSuggestions = (filterText: string, tagList: ITag[]): ITag[] => {
console.info({filterText, tagList});
const existingMatches = filterText
? _testTags
.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0)
.filter(tag => !this.listContainsDocument(tag, tagList))
: [];
return existingMatches.some(a=> a.key === filterText) ?
existingMatches :
[{ key: filterText, name: filterText, isNewItem: true } as ITag].concat(existingMatches);
};
private onItemSelected = (item: ITag): ITag | null => {
if (item && item.isNewItem) {
alert("New item added, make any necessary backend calls.");
}
return item;
};
private listContainsDocument(tag: ITag, tagList?: ITag[]) {
if (!tagList || !tagList.length || tagList.length === 0) {
return false;
}
return tagList.filter(compareTag => compareTag.key === tag.key).length > 0;
}
}
ReactDOM.render(
<Fabric>
<TagPickerBasicExample />
</Fabric>,
document.getElementById('content')
);
Надеюсь, это поможет - мне действительно помогло.
Оказывается, это было довольно просто. Вам просто нужно установить опору createGenericItem для метода, который возвращает фиктивный элемент:
createGenericItem = {(input: string) => {
return { key: '', name: input} as ITag;
}}
ты чего-нибудь добился с этим? я хочу сделать то же самое ...