具有语义 UI 的默认多个标签反应下拉

Question

我正在使用语义反应下拉菜单，我正在尝试获取它，因此选项已经作为多个标签出现在下拉列表中，但我似乎无法将它们添加为默认值，然后我希望能够添加更多我想我已经可以用这个例子来做，但我遇到的问题主要是有多个默认的多个标签，有没有可以帮助的人

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

const options = [
  { key: 'English', text: 'English', value: 'English' },
  { key: 'French', text: 'French', value: 'French' },
  { key: 'Spanish', text: 'Spanish', value: 'Spanish' },
  { key: 'German', text: 'German', value: 'German' },
  { key: 'Chinese', text: 'Chinese', value: 'Chinese' },
]

class DropdownExampleAllowAdditions extends Component {
  state = { options }

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


  handleChange = (e, { value }) =>{ console.log(value) 
    return this.setState({ currentValues: value })}

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

    return (
      <Dropdown
        options={this.state.options}
        placeholder='Choose Languages'
        search={(props)=>(props)}
        defaultSelectedLabel={ options}
        selection
        fluid
        multiple
        allowAdditions
        value={currentValues}
        onAddItem={this.handleAddition}
        onChange={this.handleChange}
      />
    )
  }
}

export default DropdownExampleAllowAdditions

当我尝试向默认标签添加任何内容时，我一直得到这个值

Warning: Failed prop type: Invalid prop `defaultSelectedLabel` supplied to `Dropdown`, expected one of type [number, string].

Answer 1

为了使此工作正常进行，您的 defaultSelectedLabel 类型应为数字或字符串。所以，首先，你不应该在那里发送数组。其次，我相信 defaultValue 道具是为你所想要的。它在文档中的定义声明为：“如果有多个，则为初始值或值数组。”。如果你查看我的 codesendbox，你会看到它在那里工作。

defaultValue={["English", "French"]} // is what I did

具有语义 UI 的默认多个标签反应下拉

Default multiple labels with semantic UI react drop down

javascript

typescript

reactjs

semantic-ui

semantic-ui-react