标签: semantic-ui-react

我有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？

现在我使用ReduxForm的Field组件并应用原始语义UI类.但后来我遇到了Semantic UI React,它使事情变得更容易 - 你可以使用具有语义ui风格的React组件.

您如何将ReduxForm与SemanticUIReact集成？

例如,我目前有类似的东西:

<Field name="gender" component="select" className="ui fluid dropdown">
  {genderOptions}
</Field>

但是,我想将下面的语义UI React组件连接到redux-form:

<Form.Field control={Select} label='Gender' options={genderOptions} placeholder='Gender' />

!注意Field来自redux-form,Form.Field来自语义-ui-react

我想创建一个多行+多列视图.

我想我可以使用表格或网格.

我应该使用哪一个？为什么？

我正在使用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)是空的.

已在语义ui的文档和问题页面中进行Google搜索，并在stackoverflow中进行了搜索。找不到答案。

在Semantic-ui-react中，如何制作内容固定在屏幕上的边栏？我目前所拥有的是：

<Sidebar.Pushable as={Segment}>
    <Sidebar
        id="sidebar"
        as={Menu}
        animation="overlay"
        direction="right"
        visible={this.state.visible}
        vertical
        inverted
    >
        {this.getMenuItems()}
    </Sidebar>
    <Sidebar.Pusher>
        <Route path="/" component={Filler} />
    </Sidebar.Pusher>
</Sidebar.Pushable>

语义ui反应文档中似乎没有任何单词，并将Sidebar.Pushable，Sidebar或任何Menu Items位置设置为：fixed; 似乎也不起作用。

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

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

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

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

谢谢

我在我的 React 应用程序中使用 Typescript 来使用语义 UI 反应，但它给出了错误。该项目使用 PnPify。

TS2604：JSX 元素类型“标头”没有任何构造或调用签名。

我对打字稿很陌生，不知道如何解决这个问题，这是一个组件

import React from 'react'
import Card from '../UI/Card'
import {Header } from 'semantic-ui-react'


const Test: React.FC = () => {

    return (
         <div>
             <Card>
                <Header> Test </Header>
            </Card>
        </div>
    )
}


export default Test

编辑：我复制粘贴了此定义文件的类型，它似乎有效，但我不确定这是正确的方法 https://gist.github.com/tomitrescak/6261ad27dbe43aad03b2497721d751f5