小编Ole*_*hov的帖子

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

如果我用这个......

<Menu.Item name='profile'>
    <Icon name='user' />
    My profile
</Menu.Item>

......它给了我结果:

<a class="item">
    <i aria-hidden="true" class="user icon"></i>
    My profile
</a>

但我想得到类似的东西

<Link to='profile'>
    <i aria-hidden="true" class="user icon"></i>
    My profile
</Link>

这个不起作用,因为语法错误:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>

我找不到具有适当文档的React Datetime组件.我需要使用Semantic UI React在React项目中使用Datetime选择器.

我试过https://github.com/react-component/calendar但是无法让它正常运行......似乎选项非常有限(这是奇怪的顺便说一句......).

你能用这些库提供一个日期时间选择器的工作示例吗？

原始语义菜单会自动变成汉堡包图标

好像通过代码重复.是否可以通过语义ui反应重新创建代码重复(作为一个组件)以及如何做这样的事情？

语义UI有一种很好的方式将通用大小应用于很多东西，例如按钮（在语义UI React中）：

<Button size="tiny"  />

但是，下拉菜单在许多情况下看起来就像一个按钮，并与按钮放在一行中，似乎没有采用“ size”参数。

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

是否有一个很好的方法将下拉列表中的大小与其他元素（例如，连续的按钮）相同？（即不仅摆弄自定义CSS，而且更易于维护）。

我有React组件:

<Dropdown
    placeholder={field[propName].label}
    id={propName}
    fluid
    multiple
    selection
    search
    defaultValue={defaultOptions}
    options={options}
/>

所以options和defaultOptions结构数组是一样的{text: 'string, value: 'string'}.

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

/** Initial value or value array if multiple. */
    defaultValue: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.arrayOf(PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
      ])),
    ])

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

`Warning: Failed propType: Invalid prop `defaultValue` supplied to `Dropdown`. Check the render method of `View`.`

那么问题是我应该如何为多选类型的Dropdown设置defaultValue？

我正在使用Item（Semantic UI React）并且我想将图像设置为链接。但是我如何引用链接 URL？

<Item>
    <Item.Image src={this.props.fileUrl} size='tiny' as='a' />
    <Item.Content>
    </Item.Content>
</Item>

如果我包裹Item.Image在一个a-container 中，填充就会变得一团糟......

我目前正在尝试将Menu.Item中的Icon和文本与Semantic UI React V.0.68.2对齐.

目前我的HTML输出如下所示:

<a class="active item pointer">
    <i aria-hidden="true" class="icon ti-icon ti-home large"></i>
    Dashboard
</a>

我的JSX是这样的:

<Menu vertical className="some classes" icon=''>
    <Menu.Item
    active={active}
    onClick={onClick}
    className="some class"
    >
        <Icon name="home" large /> Dashboard
   </Menu.Item>
</Menu>

我写了一个新的Icon组件来使用我自己的Icon字体,看起来像这样.我试图保持与Remantic Implementation of Semantic UI中的原始Icon类接近.

import React, { Component } from "react";
import classnames from "classnames";

/**
 * @class Icon
 * @extends {Component}
 * @description Icon class for themify icons. Replacement for semantic ui Icon class
 */
class Icon extends Component {
    render() { …

我正在尝试将reactx-form与react-semantic-ui一起使用,并且在使用Checkbox组件时遇到了问题.该复选框没有被选中.我已经按照redux-form文档中的示例进行了操作,但没有运气.这是代码段:

renderCheckBox = ({ input, label }) => {
  console.log(input.value);
  return (
    <Form.Field>
      <Checkbox
        label={label}
        checked={input.value ? true : false}
        onChange={input.onChange}
        />
    </Form.Field>
    );
};



<Field
  name="activated"
  label="Activate?"
  component={this.renderCheckBox}
/>

输出console.log(input.value)是空的.

是否可以最初将焦点设置为 Dropdown 元素的输入字段？

<Dropdown
  name={name}
  placeholder='Select type'
  search
  searchInput={{ type: 'text' }}
  selection
  onChange={this.handleChange}
  options={options}
/>

因此，用户应该能够开始输入/搜索，而无需单击下拉输入字段...

我正在使用semantic-react-ui的Popup组件,我想知道如何通过单击弹出窗口内的按钮而不使用jquery来触发关闭弹出事件.

谢谢

我正在使用react-semantic-ui Modal对象.打开模态的对象是道具.

 <Modal
       trigger=<Button>Text</Button>
       otherProp=...
   >
  </Modal>

我想在另一个组件中嵌入Modal:

export default class Confirm extends Component {

    render() {
        return (
            <Modal
                trigger={this.props.trigger} /* here */
              >    
                <Modal.Content>
                    ...
                </Modal.Content>
                <Modal.Actions>
                    ...
                </Modal.Actions>
            </Modal>
        )
    }
}

如何将JSX代码(<Button>Text</Button>)作为要呈现为模态道具的道具传递？

我正在尝试实现一个可搜索的下拉列表（使用 Semantic UI React 库），该下拉列表由来自服务器的匹配结果填充。用户会看到一个输入框。一旦他们开始输入几个字符，就会向后端 restful 端点发出请求，该端点返回匹配的搜索结果。这些结果在下拉列表中显示为值。

这对于普通的语义 UI 来说很容易（在https://semantic-ui.com/modules/dropdown.html#match-search-query-on-server 中解释）。

但是如何使用库的 React 版本来实现这一点？

我无法从文档（https://react.semantic-ui.com/modules/dropdown/#usage-remote）中弄清楚。

有人可以为我提供一个例子吗？

我正在学习React，大约要花一个星期的时间。我想构建一个下拉列表并学习React Semantic UI，我认为我可以从此处复制其网站的代码开始。即使尽可能直接复制代码，我也无法正确显示。有人可以解释一下让我看起来错误的区别是什么吗？

我的代码：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

var options = [
    {
      text: 'Jenny Hess',
      value: 'Jenny Hess',
    },
    {
      text: 'ME',
          value: 'ME',
    }
]

const Reorder = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={options} />
)

export default Reorder

文档中的代码示例：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

import { friendOptions } from '../common'
  // friendOptions = [
  //   {
  //     text: 'Jenny Hess',
  // …