reactjs - 当我在 NormalPeoplePicker 中使用 onRenderItem 时,角色样式被破坏
问题描述
我正在使用NormalPeoplePicker
来自office-ui-fabric-react
. 我覆盖onRenderItem
了事件,但它破坏了 Persona 风格。我提供了两张图片和我的代码,感谢您的解决方案。
private onRenderItem(props: IPickerItemProps<IPersonaProps>):JSX.Element {
return (<div className={ "ms-FocusZone ms-PickerPersona-container personaContainer_894c3072" }>
<div className={ "ms-PickerItem-content itemContent_894c3072" }>
<Persona
{ ...props.item }
size={ PersonaSize.regular }
hidePersonaDetails={ false }
/>
</div>
<div className={ "ms-PickerItem-content itemContent_894c3072" }>
<IconButton
iconProps={{ iconName: 'Cancel' }}
title="Cancel"
ariaLabel="Cancel"
onClick={ () => { this.ListPeoplePicker_RemoveItem(props.index); } }
/>
</div>
</div>);
}
private ListPeoplePicker_RemoveItem(index: number) {
this.listPeoplePicker.items.splice(index, 1);
this.listPeoplePicker.forceUpdate();
}
return (
<div>
<NormalPeoplePicker
selectedItems={props.selectedItems}
onResolveSuggestions={onFilterChanged}
onRenderItem={onRenderItem}
//onEmptyInputFocus={returnMostRecentlyUsed}
getTextFromItem={getTextFromItem}
pickerSuggestionsProps={suggestionProps}
className={'ms-PeoplePicker text-300'}
key={'normal'}
// onValidateInput={validateInput}
removeButtonAriaLabel={'Remove'}
onItemSelected={onItemSelected}
onChange={onChange}
inputProps={{
placeholder: getPlaceholderText(),
onBlur: onBlur,
//onClick: (e) => { alert('click picker'); console.log(e, 'click pick') },
onFocus: (ev: React.FocusEvent<HTMLInputElement>) => {
setShowPlaceholder(true);
console.log('onFocus called')
},
'aria-label': 'People Picker',
}}
defaultSelectedItems={props.selectedItems}
componentRef={picker}
onInputChange={onInputChange}
resolveDelay={300}
disabled={isPickerDisabled}
styles={{ root: { width: 400, background: 'white' } }}
/>
</div>
);
原创风格:
我更改后的样式:
解决方案
推荐阅读
- json - Facebook Pixel 脚本覆盖全局 JSON
- python - 在 python 中需要帮助“导入随机”
- javascript - 如何绕过 xss 客户端过滤器
- uml - 如何为同一用例创建具有多个选项的 UML 用例图?
- google-cloud-trace - GCP Cloud trace/Opentelemetry/Koa 没有按我预期的那样工作
- vb.net - 使用 DragDrop VB.Net 复制文件
- python-3.x - 在python dict中计算相等的值(碰撞)
- angular - Angular 12/rxjs 7/angularfire:不推荐使用 toPromise 的异步令牌拦截器
- python - 如何删除列中包含“无评论”字符串的行?
- python - 如何以不同的方式在骰子上获得点,我无法弄清楚