问题标签 [office-ui-fabric]

我正在尝试有条件地禁用 OUIF 详细信息列表中某些行上的鼠标单击事件。但我似乎无法让它工作。我尝试覆盖 onRenderRow 并将 CheckboxVisibility 设置为 none，但它仍然是可点击的。然后我尝试在它周围包裹一个 div 并将其设置为禁用。但是，React 中的 div 似乎没有 disabled 属性。那么有人可以在这里帮助我吗？

解决方案：

对于我的目标应用程序，默认字体有点大。

我看到 loadTheme 可以更改主主题颜色，但是有没有办法更改所有组件的默认字体大小？

IFontStyles 指定了多种尺寸，那么有没有办法将所有织物反应组件的字体大小设置为“小”（FontSizes.small）？

我试图直接在外部容器和 Fabric 组件内部将 css 字体大小设置为较小的值，但是一旦渲染进入 Fabric 组件内部，这些组件似乎仍会渲染大约 14px (ms-font-size-m)。

主题代码对我来说相当混乱，但看起来fabric-react 使用了fabric-core scss、fabric-react scss 和glamor (runtime js->css) 的组合来根据需要生成样式表并返回类名以响应代码类名属性。似乎没有使用内联样式。

- - 更新 - -

使用以下方法使其工作：

• 网页包
• 打字稿
• ts装载机
• 反应
• 反应域
• @types/反应
• @types/react-dom
• office-ui-fabric-react

一旦我运行了一个简单的 react 示例，就很容易为 fabric-react 做同样的事情。

一些不错的教程：

• https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
• https://medium.com/@gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4

----原帖----

作为一个新手React/node我想在使用中创建一个测试应用程序Visual Studio 2017（Fabric ReactFabric，因为我想采用 Office 的外观）。到目前为止，我已经花费了无数个小时来弄清楚如何让它工作，并遇到一个又一个问题（例如创建package.json、安装Gulp等）。关于这个主题有很多教程，但它们似乎都有点分散或仅在依赖项中的 1 个上。

首先：

• 我想构建一个 Web 应用程序 - 非常简单/基本，用于测试目的，并且只使用一些 Fabric UI 组件。
• 我在 Visual Studio 2017 中创建这个 Web 项目作为 ASP.NET Core Web 应用程序 (.NET Core)
• 我的 Visual Studio 2017 版本是：Community 2017，版本 15.2 (26430.13)
• 使用 Fabric-React（而不是 FabricJS）
• 按照http://dev.office.com/fabric#/get-started的建议将其与 Gulp 一起使用

到目前为止，我使用了以下文档：

• https://dev.office.com/fabric#react
• http://dev.office.com/fabric#Overview
• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
• http://leruplund.dk/2017/04/15/setting-up-asp-net-core-in-visual-studio-2017-with-npm-webpack-and-typescript-part-i/
• 在 Visual Studio 2017 中设置 gulp 的正确方法是什么？
• https://travismaynard.com/writing/getting-started-with-gulp

可能还有一些我忘记了..

完成的步骤：

1. 已安装Node(v6.11.2)
2. 创建了我的名为 Test2 的 Web 项目
3. npm使用 Nuget Package 安装程序将 (v3.10.10) 添加到我的项目中
4. 创建了package.json文件。不确定了，在 100 次测试之后，如果我手动使用npm init或者这是通过在我的项目中安装 npm 自动完成的，无论如何它在我的项目中：

5. 已安装gulp（使用此链接What is the correct way to set up gulp in Visual Studio 2017?），简短的总结，我使用 Bundler & Minifier 扩展将我的 bundleconfig.json 文件转换为 Gulp。
6. 使用（工作）测试是否Gulp运行（并更新 package.json Task runner explorer）：
7. 按照此处的说明安装了 office-ui-fabric-react ( https://dev.office.com/fabric#react )，还按照此处的说明安装了 react 和 react-dom ( http://dattabase.com/sharepoint-app-织物-ui-react-part-1-3/ )
8. 在我的文件中添加了一堆代码site.js（在我的 MVC 视图中链接到） - 添加了此处列出的命令栏 react-fabric 代码：http: //dev.office.com/fabric#Variants

这是我卡住的部分。首先，由于不熟悉一般的反应，我不确定是否应该将这样的组件添加到我的视图中。其次，它不起作用并给我以下错误：

有谁知道是哪一步出错了？一些附加信息： Package.json 包含：

site.js 包含：

我的项目概述：

我想创建一个组件，它由Datepicker和ChoiceGroup使用 ReactJs 和 office365 组成。在第一次渲染时必须禁用日期选择器，当我们在 ChoiceGroup 中选择自定义单选按钮时，它必须启用。一段代码：

选择器有disabled参数，我想在 ChoiceGrou 方法中更改它：

此方法有效并更改参数，但 datepicker 组件的禁用不会更改。它保持不变，当我单击任何单选按钮时，我在控制台中出现错误：

这个错误的原因是什么？

我今天去了 Office UI Fabric 的网站，发现“Fabric.js”作为一个选项被删除了。

微软是否不鼓励使用它？

我正在使用带有 Office UI 结构 js UI 组件的 Outlook 加载项。我在使用下拉菜单时遇到问题。

单击下拉菜单时，它不会显示下拉列表样式，而是会打开一个带有选项的全新面板。

我按照此链接添加下拉组件。

有人对如何在反应详细信息列表中聚焦按钮有建议吗？Refs 似乎是要走的路，我想做这样的事情：

但我无法获得按钮元素的 ref 句柄。

我尝试过的一种方法是在我的 DetailsList 中：

还有我想要关注的按钮（来自renderItemColumn）：

在 didComponentMount() 中，我现在可以访问 DetailList，但我不确定如何让按钮 ref 获得焦点。

或者，我可以将按钮定义为：

这给了我一个按钮的句柄，但它没有 focus() 函数。

谢谢你的想法。

我们正在尝试使用 office ui fabric react 构建一个带有 asp.net MVC 的示例应用程序。按照此处提到的 node js 命令提示符执行以下步骤。按照这些步骤，我可以让正常的反应样本工作。我尝试在 index.tsx 文件中添加下面给出的结构 UI 标签代码，然后运行应用程序，但结构反应标签组件没有在浏览器中呈现。index.tsx 代码：

添加此代码后，从 nodejs 命令提示符运行 webpack，然后尝试浏览具有以下代码的 index.html。但是看不到反应组件被渲染，我也没有得到任何错误。

有人可以在这里提供帮助，是否有我在这里遗漏的任何其他步骤或指导我让织物反应组件与 asp.net 一起使用。

谢谢

我们在 aspx 页面上使用 office UI fabric js SearchBox 组件。我们使用了这里的示例代码。我们面临的问题是，当搜索框失去焦点时，在搜索框中输入的值被清除并变为空。甚至在他们的文档站点中也会发生同样的情况。任何观察此问题的人以及解决此问题的任何帮助。

谢谢，

我有下表：

行以动态方式绘制，还有用于删除每一行的按钮。

问题是每次我单击控制台中的删除按钮时，它都会显示：

因此，我无法访问 Button Id 属性，但这仅在我发布 Webpart 时发生。有谁知道如何修复它？

谢谢！