Блог

Я использую NormalPeoplePicker from 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>
    );
  

Оригинальный стиль:

Стиль после моих изменений: