Question

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

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版可以解决此问题。

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

1 个答案: