Невозможно обработать изменение / щелчок по внутренним элементам (отображаемым с помощью onRenderField) ChoiceGroup в office-ui-fabri c -react - PullRequest
Новая
       8

Невозможно обработать изменение / щелчок по внутренним элементам (отображаемым с помощью onRenderField) ChoiceGroup в office-ui-fabri c -react

1 голос
/ 13 марта 2020

Я должен обрабатывать щелчок или изменение внутренних элементов в переключателе ( ChoiceGroup ) в office-ui-fabri c -реагировать. В приведенном ниже примере я хочу нажать на ссылку, но не могу. Насколько я понимаю, мы можем отобразить элемент JSX внутри onRenderField опции (типа IChoiceGroupOption). Я могу сделать правильно, но не могу выполнить никаких действий по этому поводу. Нужно ли отменять щелчок переключателя? Как? 

const {
    ChoiceGroup,
    IChoiceGroupOption,
    mergeStyles,
    Fabric
} = window.Fabric;


const ChoiceGroupCustomExample: React.FunctionComponent = () => {
    return (
        <ChoiceGroup defaultSelectedKey="B" options={options} label="Pick one" />
    );
};

const optionRootClass = mergeStyles({
    display: "flex",
    flexDirection: "column",
    alignItems: "baseline"
});


const options: IChoiceGroupOption[] = [
    {
        key: "A",
        text: "Option A",
        ariaLabel:
          "Mark displayed items as read after - Press tab for further action",
        onRenderField: (props, render) => {
            return (
                <div className={optionRootClass}>
                    {render!(props)}
                    <a
                        href="#"
                        onClick={() => console.log("SSSSSSSSSSSS")}
                        style={{ marginLeft: "25px" }}
                    >
                        SHUBHAW KUMAR
                    </a>
                </div>
            );
        }
    },
    { key: "B", text: "Option B" },
    { key: "C", text: "Option C", disabled: true },
    { key: "D", text: "Option D" }
];

const ChoiceGroupCustomExampleWrapper = () => (
    <Fabric>
        <ChoiceGroupCustomExample />
    </Fabric>
);

ReactDOM.render(
    <ChoiceGroupCustomExampleWrapper />,
    document.getElementById("content")
);
<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>

Вы можете найти код на этом codepen .

enter image description here

Ответы [ 2 ]

0 голосов
/ 14 марта 2020

Вы можете добавить это CSS: 

input.ms-ChoiceField-input {
    height: fit-content;
}

, чтобы уменьшить интерактивную область для опции радио (чтобы она не мешала вам переходить по ссылке).

0 голосов
/ 13 марта 2020

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

<a
  href="#"
  onClick={() => console.log("SSSSSSSSSSSS")}
  style={{ marginLeft: "25px", zIndex: 100000 }}
>
  SHUBHAW KUMAR
</a>
...