问题标签 [semantic-ui-react]

我有反应组件：

所以options和defaultOptions是相同的结构数组{text: 'string, value: 'string'}。

在语义 UI 源代码中，我发现了这个：

这就是我上面的代码给我错误的原因：

所以问题是我应该如何为下拉的多选类型设置默认值？

我是 React 新手，正在使用库：Semantic-UI-React。

我正在尝试使用 Semantic-UI-React 中的 Dropdown 组件，但我无法传递我的道具。当我 console.log 在示例代码中的任何位置记录我的道具时，我得到一个错误。

Semantic-UI-React 下拉示例看起来与我的正常反应代码不同。它只有一个出口。我的普通代码有一个渲染和一个返回部分。

http://react.semantic-ui.com/modules/dropdown

我的父页面得到这样的孩子：

我的 TagFilter 组件如下所示：

我不知道是否可以重写示例中的代码，使其看起来更像我的其余代码。

我是 React 的新手，我正在使用 Semantic-ui-react。我正在尝试使用下拉菜单。

当我想从下拉列表中获取我的值并调用我的函数时。我的事件得到一些代理对象。

但是，如果我在函数中添加其他类似 test 的内容，则 e.target.value 有效并且 test 是代理对象。这是为什么？

标签过滤器.js

员工.js

我在使用 React 的语义 Ui ( http://react.semantic-ui.com/ )为 React 组件设置样式时遇到问题。我知道我可以修改 Semantic UI 的样式 Core，但有时我想将自己的样式放入它们的组件中。

我真的很想在定义类名时使用 BEM 方法 CSS 命名约定。

简短的例子，我有<Menu />组件，我想改变它的背景，所以我会添加一个类<Menu className="menu-header">，.menu-header 类具有不同的背景颜色属性。

关键是，如果没有 ，我无法修改它!important，因为语义 UI 具有更高的优先级（它们正在抓取更具体的元素，几乎没有我想要的类）。所有样式都被 webpack 捕获，我的.menu-header样式位于 bundle.js 的底部 - webpack 输出，低于语义 UI。该类.menu-header被直接导入到我的新组件中，该组件使用<Menu className="menu-header">webpack 中 CSS 加载器的示例。

在这种情况下我能做什么？

我的想法是我可以修改语义 ui 的核心，改变那里的一切，但这并不能解决我的问题。每当我想再次修改某些东西时，我都必须使用!important- 我不喜欢它。

我意识到 react 内联 js 样式具有最高优先级，它会覆盖语义 ui 样式，但它比我使用的 less 稍微复杂一些，我不确定在像一个我想开发的。

试图让基本的语义-ui-react Dropdown 工作，我似乎无法弄清楚如何防止在打开 Dropdown 时采用placeholder第一个值。option甚至可能吗？

一支笔，这里有一个例子：http: //codepen.io/pzurek/pen/mRJMov

我将 TypeScript 与 React 和Semantic-UI-React一起使用。我想替换现有的表格渲染，它使用固有的“td”元素渲染表格单元格，如下所示：

使用 Semantic-UI.React Table.Cell 元素，如下所示：

问题是强类型的“Table.Cell”元素（其属性由 TableCellProps 接口确定）上不存在属性“onClick”，因此无法编译代码。

我的解决方法是在一个元素中组合 Table.Cell 元素，其 props 子类 TableCellProps 如下所示：

然后将单元格渲染为：

但这会导致嵌套更深的 React 结构（尽管最终的 HTML 渲染看起来还不错）。

我的问题是：在使用 TypeScript 时，是否有更惯用的方式使用 Semantic-UI-React 执行此操作？

Semantic-ui-react 文档中的增强部分和菜单/链接示例中给出了应该有一种方法的提示：

他们在哪里发表评论：

额外的道具被传递给你正在渲染的组件。

在这种情况下，'to' 属性不是 Menu.Item 元素可以识别的属性，而是 Link 元素需要的属性。

我正在使用官方Semantic UI React组件来创建 Web 应用程序。我的注册页面上有一个表单，其中包含一个电子邮件字段、一个密码字段和一个确认密码字段。

现在，我习惯了常规的语义 UI 库，它有一个表单验证插件。通常，我会在一个单独的 JavaScript 文件中定义这样的规则

是否有使用 Semantic UI React 组件验证表单的类似方法？我搜索了文档但没有成功，似乎没有使用这个 Semantic UI React 库进行验证的示例。

我是否需要在handleSubmit函数中手动验证每个字段？解决此问题的最佳方法是什么？谢谢您的帮助！

我正在通过 CDN 加载基本语义 ui.min.css，即：

但是，我的页面还有其他这样的 div：

我希望语义-ui css 仅适用于：

div #menu-in-react

而不是

div#container-for-non-react-stuff

但是，现在，通过包含semantic-ui-css 文件，它也应用了它的样式div #container-for-non-react-stuff。

如何将语义-ui.css的应用限制为仅特定的 div（或从某些 div 中排除）？

注意：我也尝试使用 webpack 使用 require('./myDist/semantic.css') 来加载 css，但这也最终导致语义 UI 接管了我所有的 div。

谢谢！

现在我使用 ReduxForm 的Field组件并应用原始语义 UI 类。但后来我遇到了Semantic UI React，这让事情变得容易多了——你可以只使用具有语义 ui 风格的 React 组件。

您将如何将 ReduxForm 与 SemanticUIReact 集成？

例如，我目前有类似的东西：

但是，我想将如下所示的 Semantic UI React 组件连接到 redux-form：

！注意Field来自 redux-form 和Form.Field来自 semantic-ui-react

我正在尝试获取一个语义 ui (react) 菜单列表，它应该与 react 路由器一起使用，这意味着我想Link使用react router

如果我用这个...

...它给了我结果：

但我想得到类似的东西

这个不起作用，因为语法错误：