标签: semantic-ui-react

在我的主要组件中,我可以通过单击图标打开模态.模态的内容是一个单独的组件,它调用一个方法.如果方法调用成功,我想关闭模态.但是我怎么能这样做呢？

主要成分

class Example extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <div>
                <Modal trigger={ <Icon name='tags' /> } >
                    <Modal.Header>
                        <div>
                            <Header floated='left'>Title</Header>
                            <Button floated='right'>A Button</Button>
                        </div>
                    </Modal.Header>
                    <Modal.Content>

                        <ModalContent />

                    </Modal.Content>
                </Modal>
            </div>
        )
    }
}

模态内容

class ModalContent extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    handleClick() {
        method.call(
            { param },
            (error, result) => {
                if (result) {
                    // Now close the modal
                }
            }
        );
    }

    render() …

关于传统语义UI的主题有详细说明,但语义UI反应站点缺少等效部分.这是否意味着它不支持主题,或者您是否可以使用传统的语义UI方法来主题化？

我知道React世界中的一些人主张不使用CSS,而是通过编程方式将样式化作为组件设计的一部分.什么是语义UI反应理念？

我最近切换到了React Semantic-UI但是,我发现在语言UI的HTML版本中没有任何动画存在,例如下拉菜单和模态弹出窗口.

我尝试过使用过渡道具并将其包裹在一个模态中,但无济于事.

<Transition animation='scale' duration={500}>
  <Modal
    trigger={<Button>Show Modal</Button>}
    header='Reminder!'
    content='Call Benjamin regarding the reports.'
    actions={[
      'Snooze',
      { key: 'done', content: 'Done', positive: true },
    ]}
  />
</Transition>

有没有办法解决这个问题？

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

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

有人可以帮我解决如何在下拉菜单中使用onChange（语义UI React）。我正在阅读文档，但仍然不明白。它确实具有onChange道具。

onChange(event: SyntheticEvent, data: object)

如何使用？就像，我有方法dropdownmethod()。

编辑-实施了建议，但没有成功。我认为在您的建议中，您没有绑定功能。但是，我绑定了功能。

  onChangeFollower(event,data){

    console.log("on change follower",data.text)

  }

  render() {
    console.log("this.props",this.props)
    var onChangeFollower = this.onChangeFollower.bind(this)

    return (
      <div>
        <h2>project settings are here</h2>
        <h2>Add new Member</h2>

        <Dropdown onChange={onChangeFollower}
        placeholder='Select Member'
        fluid search selection options={arr} />

        <h2>List of members</h2>
        {lr}

      </div>

我很难用语义ui-react自动对焦输入字段.该文件似乎不包括autoFocus道具和focus道具不将光标置于输入字段里面正如所预期的.

<Form onSubmit={this.handleFormSubmit}>
  <Form.Field>
    <Form.Input
      onChange={e => this.setState({ username: e.target.value })}
      placeholder='Enter your username'
      fluid />
  </Form.Field>
</Form>

编辑:此代码有效:

<Form onSubmit={this.handleFormSubmit}>
  <Form.Input
    onChange={e => this.setState({ username: e.target.value })}
    placeholder="Enter your username"
    autoFocus
    fluid />
</Form>

如何semantic-ui-react在html表中使用colspan通常合并几个单元格？

https://react.semantic-ui.com/collections/table#types-pagination

我尝试了不同的选择 - 似乎没有任何帮助!!

使用 React Semantic UI，默认外观是这样的

这是生成该组件的代码（来自网站）。

import React, { Component } from 'react'
import { Icon, Menu } from 'semantic-ui-react'

export default class MenuExampleCompactVertical extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu compact icon='labeled' vertical inverted>
        <Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}>
          <Icon name='gamepad' />
          Games
        </Menu.Item>

        <Menu.Item
          name='video camera'
          active={activeItem === 'video camera'}
          onClick={this.handleItemClick}
        >
          <Icon name='video camera' />
          Channels …

我正在按照官方文档中的示例创建一个简单的Popup:https://react.semantic-ui.com/modules/popup

所以这是我目前的代码非常有效:

export default (state, methods) => {
  const { trigger, handleTooltipOpen, handleTooltipClose } = methods;

  return (
    <Popup className={ `tooltip ${ state.className }` } trigger={ trigger } open={ state.tooltipShown }
      onOpen={ handleTooltipOpen } onClose={ handleTooltipClose }
      on="hover" hideOnScroll>
        <p>Popup Text</p>
    </Popup>
  );
};

但默认情况下,它会将弹出窗口附加到末尾<body>(这对我来说非常混乱).有没有办法如何指定准确附加弹出窗口的位置,或某种inline选项？

PS我已经添加了一个指向沙箱的链接,您可以在其中复制问题 - 只需在响应式移动模式下打开它并点击即可.

我正在尝试设置我的搜索，因此当我单击 Enter 时，它将开始搜索并重定向到搜索页面。我正在查看文档，但不清楚如何设置。如何设置按 Enter 开始搜索？我很难弄清楚这一点，尽管我认为它应该很简单。

class SearchBar extends Component {
  constructor(props) {
    super(props)
    this.state = {query: '', results: [], isLoading: false}
  }

  componentWillMount() {
     this.resetComponent()
   }

   resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })

   search(query) {
     this.setState({ query });
     axios
       .get(`/api/search?query=${query}`)
       .then(response => {
         console.log(query);
         this.setState({ results: response.data});
       })
       .catch(error => console.log(error));
   }


  handleSearchChange = (query) => {
    this.search(query);
    this.setState({ isLoading: true, query })

    setTimeout(() =>
      this.setState({
        isLoading: false,
      }) , 300)

  }

  handleResultSelect = (e, …