Office-ui-fabric-react选项组在与文本字段相同的组件中时行为不正确

Question

我正在为Outlook开发一个外接程序，使用office-ui-fabric-react，使用Typescript。我有一个对话框，它有一个选项组、一个文本字段、一个默认按钮和一个主按钮，如下所示：

export interface ChoiceGroupDemoProps {
    onChoiceGroupChange: (ev: React.FormEvent<HTMLInputElement>, option: any) => void;
    onTextFieldChanged: (newText: string) => void;
    onSubmit: () => void;
    onCancel: () => void;
}

export const ChoiceGroupDemoForm: React.StatelessComponent<ChoiceGroupDemoProps> = (props: ChoiceGroupDemoProps): JSX.Element => {
    return (
        <div>
            <div>
                <ChoiceGroup
                    defaultSelectedKey='A'
                    options={[
                        {
                            key: 'A',
                            text: 'Test 1',
                        } as IChoiceGroupOption,
                        {
                            key: 'B',
                            text: 'Test 2'
                        },
                        {
                            key: 'C',
                            text: 'Test 3',
                        }
                    ]}
                    required={true}
                    onChange={props.onChoiceGroupChange}
                />
                <TextField
                    multiline
                    rows={4}
                    placeholder='Comments'
                    onChanged={props.onTextFieldChanged}
                />
                <div>
                    <DefaultButton text='CANCEL' onClick={props.onCancel} />
                    <PrimaryButton text='SUBMIT' onClick={props.onSubmit}/>
                </div>
            </div>
        </div>
    );
};

选择组单选按钮需要单击两次才能选择一个按钮，在文本字段中键入会取消选择单选按钮。

除了选择组本身之外，没有任何示例显示其他任何内容。如何让组件与这种ui组件组合一起工作？

Answer 1

升级到版本6.153.0解决了这个问题。