标签: semantic-ui-react

我希望我的默认选择选项dropdown.当我添加所选选项但不使用默认选定选项渲染时,下面的代码有效:

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

我尝试添加defaultSelectedLabel={this.state.selected}.

this.state.selected 是一个选项数组,默认情况下所选的值为true:

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                  defaultSelectedLabel={this.state.selected}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

但我得到以下警告:

Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.

我对defaultValue道具做了同样的事情但得到了同样的错误

如何获取默认选项dropdown？

我正在尝试在React上关注/突出显示输入文本onClick.它按预期工作,但仅适用于渲染数组中的最后一个元素.我尝试了几种不同的方法,但它们都做了完全相同的事情.以下是我的两个例子:

export default class Services extends Component {

handleFocus(event) {
    event.target.select()
}

handleClick() {
    this.textInput.focus()
}


render() {
    return (
        <div>
            {element.sources.map((el, i) => (
                <List.Item key={i}>
                <Segment style={{marginTop: '0.5em', marginBottom: '0.5em'}}>
                    <Input fluid type='text'
                        onFocus={this.handleFocus}
                        ref={(input) => { this.textInput = input }} 
                        value='text to copy'
                        action={
                            <Button inverted color='blue' icon='copy' onClick={() => this.handleClick}></Button>
                        }
                    />
                </Segment>
                </List.Item>
            ))}
        </div>
    )
}

如果只有一个元素被渲染,它会将文本聚焦在输入中,但如果有多个元素,则每个元素的按钮单击仅选择最后一个元素的输入.这是另一个例子:

export default class Services extends Component {

constructor(props) {
    super(props)

    this._nodes = new Map()
    this._handleClick = this.handleClick.bind(this) …

好吧，我有一个名为<TestButton />. 在里面<TestButton />有两个 Semantic UI React 组件，<Button />和<Header>.

基本上，当<Button>单击 时，它会切换display: none;到<Header>。

我想检查（我想学习）如何断言<Header>'s display: none;when<Button>被点击。

测试按钮.js

const TestButton = (props) => {
  return (
    <div id='test-button'>
      <Header id='please-hide-me' size='huge'>Please Hide Me</Header>
      <Button
        onClick={
          () => {
            hiding = !hiding;
            let findDOM = document.getElementById(searchForThisID);
            if (findDOM) { findDOM.style.display = hiding ? 'none' : ''; }
            return hiding;
          }
        }
      >
        Sample Toggle …

我有一个模态,用户需要填写一些表格,并通过模态中的按钮保存所填写的内容.当用户保存时,我希望关闭模态.通过open在Modal组件上使用prop ,我可以完成这项工作.但是,如果我这样做,当我尝试通过closeIcon时,模态不会关闭.

我该怎么做才能让用户通过这两种方法关闭Modal？

这是我目前的模态代码:

  handleCreateButton (evt) {
    evt.preventDefault()
    // ...
    // code to save whatever was typed in the form
    // ...

    this.setState({showModal: false})
  }

  renderModalForm () {
    const {
      something,
      showModal
    } = this.state

    // if I have the open props, I get to close the Modal after the button is clicked
    // however, when using the icon or clicking on dimmer it wont work anymore.
    return (
      <Modal closeIcon closeOnDimmerClick open={showModal} trigger={<Button onClick={() => …

我无法使Semantic UI React网格完全响应,至少以桌面,平板电脑和移动设备的方式响应.

我有三个组件,我在网格列中呈现.

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Grid, Header } from 'semantic-ui-react'
import GetJobs from '../../components/Home/GetJobs';
import PostForm from '../../components/Home/PostForm';
import Feed from '../../components/Home/Feed';
import Articles from '../../components/Home/Articles';
import './home.css'

class Home extends Component {
  render() {
    return(
      <Grid id="home" stackable columns={3}>
        <Grid.Row>
          <Grid.Column>
            <Header>Articles</Header>
            <Articles/>
          </Grid.Column>
          <Grid.Column>
            <Feed/>
          </Grid.Column>
          <Grid.Column>
            <Header>Jobs</Header>
            <GetJobs/>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

export default Home;

从桌面移动到移动时,列正确堆叠.它从3列到1列.然而,在平板电脑尺寸下,3列只是更紧密地安装而不是在屏幕上有2列,而1在下面堆叠.

查看组件的组件 平板电脑视图

理想情况下,我希望Feed和Jobs在从桌面到平板电脑尺寸时保持在屏幕上,当从平板电脑转到移动设备时,请将Feed放在首位,将作业放在下面,将文章放在底部.

如何让这个网格响应这样的任何帮助表示赞赏.

我想构建从右到左方向的反应 UI。到目前为止，我已经测试了引导className="pull-right"用或手动覆盖CSS属性*{direction:rtl;}，并.float-right:{float:right;}在反应的自举部件。然而，这似乎是一种破碎的方法，因为它不适用于某些元素，例如 失去默认填充和形状的下拉按钮或某些项目仍将具有相对于彼此的先前顺序。

是否有任何具有 RTL 方向的反应框架？换句话说，有 React + Bootstrap 和 Bootstrap + RTL 的框架。有没有像

• 反应 + 引导 + RTL？还是 React + 一些 CSS 框架 + RTL？

我正在考虑使用bootstrap-rtl而不是 bootstrap-react 组件，并用我的 react 组件包装这些 HTML/CSS 组件；然而，boostrap 需要 jQuery 库，我读到了这一点，在考虑这种组合（react + jquery）时需要谨慎。

我正在使用语义中的组件来创建顶级菜单+ breadcrumb标头.出于某种原因,当尝试从最顶部位置滚动时,滚动条会"跳跃"

沙箱https://codesandbox.io/s/y7k3zn5qn1

我没有提供context粘性组件的道具.在示例中,它们始终提供封闭的React DOM引用div作为Sticky组件的上下文prop .关于context道具的目的,文件不清楚.(它说"粘性元素应该坚持的上下文")

我是否需要为粘性组件提供上下文支持以停止"跳转"滚动？如果是这样,我如何决定哪个封闭div ref作为上下文道具？

我正在使用semantic-ui做出反应来呈现数据表.我的要求是当页面在移动视图上时,我隐藏了某些列.我试着用className="mobile hidden"了上Table.Cell元素,但是这似乎并没有在所有的工作.

然后我尝试使用Responsive下面的组件,但我收到一个错误.我在这里错过了什么吗？无法找到有此问题的其他人...

  <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
     {record.datapoint}
  </Responsive>

调整窗口大小时,我在控制台中收到此错误...

index.js:2177 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Responsive component.

我在create-react-app项目中使用Semantic-UI.我使用自定义主题使用ThemeProvider修改单个组件,这是很好的.但是,我试图弄清楚如何修改较少的变量,如semantic-ui文档中所述

该反应语义UI文档中并没有提供太多这一点.有什么建议吗？

我的Index.js看起来大致如下:

import 'semantic-ui-css/semantic.min.css'
import { ThemeProvider } from 'styled-components'
import mainTheme from './themes/mainTheme'


ReactDOM.render(
  <ThemeProvider theme={mainTheme}>
    <App />
  </ThemeProvider>
  document.getElementById('root')
)

编辑:具体到我想要实现的目标,我想改变使用的主要字体.

如何在状态中选择下拉列表中的值。这是我的代码iam为名称字段获取值，但是下拉列表不起作用，有人可以找出我所缺少的内容吗？

MyComponent.js

import React,{Component} from 'react';

class MyComponent extends Component{
state={
   data:{
       name:'',
       subject:''  
   }
}

 onChange = e =>
    this.setState({
        data: { ...this.state.data, [e.target.name]: e.target.value }
    },()=>{
        console.log(this.state.data);
    }
    )

render(){
const {data}=this.state;
const subjects= [
              {text: '1',value: 'kannada'},
              {text: '2', value: 'english'},
              {text: '3',value: 'hindhi'}
            ]
return(
<div>
            <Input 
             name="name"
             onChange={this.onChange} 
             placeholder='Your name ...' 
            />
            <Dropdown 
             placeholder='Select Subject'
             name="subject"
             onChange={this.onChange}
             selection 
             options={subjects} 
             />
</div>

)
}
}
export default MyComponent;

如何在状态中选择下拉值？我正在为名称字段获取更改的值，但没有获取下拉列表的值。