Reactjs 无法处理更改/单击office ui中ChoiceGroup的内部元素（使用onRenderField显示）

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

const{
选择小组，
IChoiceGroupOption，
合并样式，
织物
}=窗户面料；
const ChoiceGroupCustomExample:React.FunctionComponent=（）=>{
返回(
);
};
const optionRootClass=合并样式({
显示：“flex”，
flexDirection:“列”，
对齐项目：“基线”
});
常量选项：IChoiceGroupOption[]=[
{
钥匙：“A”，
案文：“选择A”，
标签：
“将显示的项目标记为读取后-按tab键进行进一步操作”，
onRenderField：（道具，渲染）=>{
返回(
{渲染！（道具）}
);
}
},
{键：“B”，文本：“选项B”}，
{键：“C”，文本：“选项C”，禁用：true}，
{键：“D”，文本：“选项D”}
];
const ChoiceGroupCustomExampleWrapper=（）=>(
);
ReactDOM.render(
,
document.getElementById（“内容”）
);
您只需将链接的z索引设置为高值，使其位于输入元素的顶部即可


您只需将链接的z索引设置为一个高值，使其位于输入元素的顶部即可


您可以添加以下CSS：

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

要缩小可单击区域，请选择单选选项（这样不会阻止您单击链接）。
您可以添加此CSS：

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

要缩小可单击区域，请选择单选选项（这样不会阻止您单击链接）