如何在PeoplePicker中获得新的角色行为

时间:2018-11-16 02:25:36

标签: reactjs office-ui-fabric

文档允许您输入任何字符串,单击[Tab],它将显示为角色。试图复制这种行为,但遇到麻烦,示例代码什么也没说。

The behavior I want

https://developer.microsoft.com/en-us/fabric#/components/peoplepicker

我的PeoplePicker:

<CompactPeoplePicker
    getTextFromItem={(item) => { return item.text; } }
    onItemSelected={(item) => {
        console.log(item);
        return new Promise((resolve, reject) => {
            resolve(item);
        })
    }}
    selectedItems={this.state.currentSelectedItems}
    onChange={(items) => { 
        console.log(items);
        this.setState({ currentSelectedItems: items}); 
    }}
    onResolveSuggestions={this._onResolveSuggestions}
    className={'ms-PeoplePicker'} 
    pickerSuggestionsProps={{
        suggestionsHeaderText: 'Suggested People',
        mostRecentlyUsedHeaderText: 'Suggested Contacts',
        noResultsFoundText: 'No results found',
        loadingText: 'Loading',
        showRemoveButtons: true,
        suggestionsAvailableAlertText: 'People Picker Suggestions available',
        suggestionsContainerAriaLabel: 'Suggested contacts'
    }}
/>

The behavior I get

1 个答案:

答案 0 :(得分:0)

答案是简单地返回一个新的Persona作为onResolveSuggestions的一部分

_onResolveSuggestions = (filterText, ...) => {
    var suggestions = ...;
    suggestions.splice(0, 0, { name: filterText, text: filterText });
    return suggestions;
}