Как отключить чек-бокс какого-либо элемента в DetailsList? - PullRequest
Новая
       79

Как отключить чек-бокс какого-либо элемента в DetailsList?

0 голосов
/ 08 апреля 2020

В простом HTML я могу установить disabled = "disabled", чтобы отключить флажок. В DetailsList Fluent UI React как отключить флажок какого-либо элемента? Я новичок в Fluent UI React and React.

1 Ответ

0 голосов
/ 19 апреля 2020

В компоненте DetailsList есть реквизит ( onRenderCheckbox ) для управления отображением всех флажков, но внутри этой функции у вас не будет подробностей соответствующего элемента строки. Таким образом, вам необходимо использовать свойство onRenderCheck компонента DetailsRow, которое можно передать, если вы управляете свойством onRenderRow компонента DetailsList.

Это будет выглядеть примерно так (на основе базового c примера кода DetailsList ): 

onRenderRow = (props, defaultRender) => {
    // For even rows, override the default checkbox that's rendered
    const onRenderDetailsCheckbox = props.itemIndex % 2 === 0 ? this.onRenderCheckbox : undefined;
    return defaultRender && defaultRender({...props, onRenderDetailsCheckbox });
}

onRenderCheckbox = (props) => {
    return (
        <div>
            Disabled
        </div>
    );
}

<DetailsList
    onRenderRow={this.onRenderRow}
    ...
/>

Однако этот пример довольно бессмысленный, поскольку вы все равно можете "выбрать" строку с помощью просто щелкая в любом месте строки, сам флажок ничего не контролирует (реализация по умолчанию - это просто значок , а не умная кнопка). enter image description here

Возможно, один из этих ответов даст вам какое-то указание на то, что вы на самом деле пытаетесь сделать:

  1. возиться со строкой selection: Как переключать office-ui-fabri c Выбор строки в списке деталей с использованием всей строки в качестве переключателя вместо простого маленького флажка
  2. , если вы установите флажок на Smart Checkbox, вам нужно разрешить событию просачиваться, чтобы выбор правильно управлялся: Как заменить флажок из пользовательского интерфейса Fabri c Компонент DetailsList

You также следует прочитать класс Selection , который используется для управления выбором (через selection prop в DetailsList).

...