无法处理office-ui-fabric-react中ChoiceGroup的内部元素(使用onRenderField显示)上的更改/单击

Question

我必须在office-ui-fabric-react中处理单选按钮(ChoiceGroup)中内部元素的单击或更改。在下面的示例中，我想单击该链接，但无法单击。据我所知，我们可以在选项的onRenderField中显示JSX元素(类型为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上找到代码。

​

​

Answer 1

您可以将链接的z索引设置为较高的值，使其位于输入元素的顶部

​

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

​

Answer 2

您可以添加此CSS：

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

缩小可点击区域的单选选项(这样就不会阻止你点击链接)。