语义 UI 反应

Question

我正在使用 React，并希望实现与该站点类似的标记功能。我正在使用语义 UI 组件库，他们在其下拉组件中内置了此功能，您可以在其中允许输入附加值。下面是完成此操作所需的代码。

通常下拉组件期望传递一些选项，用户可以从此列表中进行选择。 allowAdditional 属性允许用户添加自己的值，然后在客户端呈现。问题是我不想提供任何选项，因为我希望用户能够编写自定义标签（不要担心我的应用程序）。如果不提供任何选项，库会在下拉列表中返回“未找到结果”。

有没有办法删除“未找到结果”或在不同的语义 UI 组件中执行此操作？如果需要，您应该能够将代码放入代码沙箱并进行调试。

任何帮助都会很棒！

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


class DropdownExampleAllowAdditions extends Component {
  state = { options: [] }

  handleAddition = (e, { value }) => {
    this.setState(prevState => ({
      options: [{ text: value, value }, ...prevState.options],
    }))
    console.log(this.state)
  }

  handleChange = (e, { value }) => this.setState({ key: value })

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

    return (
      <Dropdown
        options={this.state.options}
        placeholder='Enter a Value'
        search
        selection
        fluid
        multiple
        allowAdditions
        value={key}
        onAddItem={this.handleAddition}
        onChange={this.handleChange}
      />
    )
  }
}

export default DropdownExampleAllowAdditions

Answer 1

啊，一些懒惰的编程：

下拉API有noResultsMessage属性，可以在没有结果的时候进行处理