无法处理 change/click 办公室中 ChoiceGroup 的内部元素（使用 onRenderField 显示）-ui-fabric-react

Question

我必须在 office-ui-fabric-react 中处理单选按钮 (ChoiceGroup) 中内部元素的点击或更改。在下面的示例中，我想单击 link 但无法单击。根据我的理解，我们可以在选项（IChoiceGroupOption 类型）的 onRenderField 中显示 JSX 元素。我能够正确渲染但无法对其执行任何操作。我需要覆盖单选按钮的点击吗？怎么样？

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 上找到代码。

Answer 1

您可以将 link 的 z-index 设置为较高的值，使其位于输入元素的顶部

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

Answer 2

您可以添加这个 CSS:

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

缩小单选选项的可点击区域（因此它不会阻止您点击 link）。

无法处理 change/click 办公室中 ChoiceGroup 的内部元素（使用 onRenderField 显示）-ui-fabric-react

Not able to handle change/click on inner elements (displyed using onRenderField) of ChoiceGroup in office-ui-fabric-react

reactjs

office-ui-fabric

office-ui-fabric-react