标签: semantic-ui-react

我正在尝试使用 React Semantic UI 的Transition对基于 React Class 的组件的进入和退出进行动画处理。但这不起作用。请参阅https://codesandbox.io/s/k23z06o43r?fontsize=14。

在代码片段中，我正在进行 3 个实验：

1. 使用 Transition 为类组件的进入和退出设置动画 - 不起作用
2. 与上面相同，但 Class 组件包装在 Transition 内的 div 中 - 按预期工作，但如果可能的话，我不想要 div。或者至少理解为什么它是必要的。
3. 与 1) 相同，为 Transition 设置了 unMount 属性。- 不设置进入/退出的动画，但安装/卸载组件。

我正在尝试使用包含多个条目的语义 UI 手风琴，并允许同时打开多个条目；每个条目都有一个标题部分，其中包含一个附加弹出窗口的图标，以及一个包含文本区域的内容区域。

我希望能够同时打开两个手风琴，这显然是exclusive={false}在制作手风琴元素时使用 prop 支持的，如文档中所述

但该示例看起来使用的是内容为字符串的对象数组，而不是其他 React/html/jsx 元素（在我的例子中，它是语义 ui 图标、弹出窗口和文本区域）。该对象数组被传递到手风琴的panel道具中。

而且我不熟悉语义 ui 反应手风琴需要什么才能正确运行并跟踪索引和其他内容，我不确定还需要配置什么，或者语义 ui 组件是否可以这样做。

我基本上复制了这个示例，并使用活动索引和 onclick 处理程序，该处理程序在组件反应状态下切换活动索引。

这是手风琴和 onclick 处理程序以及反应应用程序状态的片段：

class FileUpload extends Component {

 // other stuff omitted 

  constructor(props) {
    super(props);

    this.state = {
      activeAccordionIndex: -1
    };

  handleAccordionClick = (e, titleProps) => {
     const { index } = titleProps;
     const { activeAccordionIndex } = this.state;
     const newIndex = activeAccordionIndex === index ? -1 : index;

     this.setState({
       activeAccordionIndex: newIndex
     })
   } …

我正在尝试使用语义-ui-反应和打字稿来打开一个下拉菜单。我面临的问题是，我无法将更改处理程序附加到它。它抛出以下错误“类型'SyntheticEvent'不可分配给类型'ChangeEvent'”。

//Importing Dropdown
import Dropdown from 'semantic-ui-react/dist/commonjs/modules/Dropdown';

//options array
const options = [
  { key: 1, text: 'Location 1', value: 1 },
  { key: 2, text: 'Location 2', value: 2 },
  { key: 3, text: 'Location 3', value: 3 },
]

//state object
this.state ={
  value : ''
}

//Dropwdown change event
dropdownChange = (event: React.ChangeEvent<HTMLSelectElement> ,{value}) =>{
   this.setState({ value });
}

//Rendering Drop down
render()
{
  return(
      <Dropdown  
        options={opitons}
        name="value"  
        value={this.state.value}
        onChange={this.dropdownChange}
      />
  )
}

我正在尝试将提交功能添加到我的语义用户界面反应搜索组件中，但是它并没有达到我想要的方式。

提交者应该对api进行ajax调用并注销数据。

有谁知道如何使它工作？我收到错误消息，或者即使我在输入字段中写了一些内容，我的ajax请求搜索查询也最终为空。

import React, {Component} from 'react'
import { Container, Header, Search } from 'semantic-ui-react'

import './jumbotron.css'


class Jumbotron extends Component {
constructor(props) {
    super(props)

    this.state = {value: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({value: event.target.value})
  }

  handleSubmit(event) {
    const food = this.state.value;
    const url = `https://api.edamam.com/search?q=${food}&app_id=${appId}&app_key=${apiKey}`

    fetch(url).then( response => response.json())
    .then( data => console.log(data))

    event.preventDefault();
  }


    render() {
        return (
            <Container text>
                <Header>
                    Nutrion
                </Header>
                <form onSubmit={this.handleSubmit}>
                <Search
                onChange={this.handleChange}
                type='text'
                value={this.state.value} 
                size='big'
                placeholder=' ...'/> …

我正在尝试在React中首次使用官方的语义UI反应。我建立了一个全新的react应用程序：

$ create-react-app test

然后我尝试在App.js中添加相同的反应图像，如下所示：

import React, { Component } from 'react';
import logo from './logo.svg';
import { Image } from 'semantic-ui-react';

import './App.css';


class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <div className="ui container">
          <h1>Hello World</h1>
          <Image src={logo} avatar/>
          <Image src={logo} size='mini'/>
        </div>

      </div>
    );
  }
}

export default …

我对构建类似Stack Overflow的标签输入功能感兴趣，该功能集包括：

1. 具有自动完成功能的输入字段（接受用户输入，从服务器获取结果并将这些结果显示给用户以便于选择。
2. 输入字段包含1个或多个选定项目作为标签。
3. 输入之外的建议，单击这些建议会将结果添加到输入字段中。

堆栈溢出的屏幕截图：

我正在使用Semantic-UI-React，并注意到有一个可以工作的搜索组件：https : //react.semantic-ui.com/modules/search

似乎该语义UI反应搜索组件不允许添加多个结果或通过输入之外的方法添加结果。我想念什么吗？

我应该为这个功能使用语义UI还是我需要在我的React应用程序中完全从头开始构建它？

我阅读了这个解决方案，但这并没有真正回答问题。我正在使用formik和semantic-ui-react。是否可以将 Yup 与语义 ui-react 一起使用？如果是的话，有人可以提供一个例子吗？

关于反应下拉菜单,我有一个小问题.

我可以在下拉列表中提取值,但我也需要密钥,因为我的页面用于销售内容.所以,它是一个关联表,我需要每个表中的id来进行我的查询INNERJOIN.

这是我填写它的方式:

let options_customers = [];

serviceList[0].map((service, i) =>
                    options_customers.push({ 
                        key: service.Id, 
                        text: service.Name, 
                        value: service.Name 
                     })) 

我的下拉菜单:

  <Dropdown 
    selection options={options_customers} 
    onChange={this.handleChange} 
    value={value} key={options_customers.key} 
    name="selectCustomer" placeholder='Select Customer' 
  />

我正在使用 Semantic-ui-react 来设计和显示一些组件，但我陷入了以下问题。通常，我使用反引号和美元符号在链接或 HTTP 地址中使用我的变量的核心值，但是当我尝试在 Item 组件上使用它时，它不起作用。它只接受简单或双引号。任何想法我怎么能做到这一点？每次用户按下新按钮时，我都需要动态更改 Image 的 src。

 <Item.Image src=`http://...../${this.state.card}`/>

我是新来的。我不知道如何在我的组件之一中导入json数据。

这是我的json数据：

[
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "abcyz@gmail.com"
    },

    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "defvu@gmail.com"
    }
]

这是列表组件：

<Container>
  <Grid>
    <Grid.Row>
      <Grid.Column>
      <Header>List</Header>
      <List>
            <List.Item block>
    <List.Content>FirstName and Last Name</List.Content>
      <List.Content>Phone</List.Content>
    </List.Item>

            </List>
      </Grid.Column>
    </Grid.Row>
  </Grid>
</Container>

谁能帮我显示清单？提前致谢