Question

我无法确定如何设置动态下拉组件，并为我正在处理的功能中的每个呈现元素设置多值选择。我认为我非常接近，但最终需要一些指导。

这是组件：

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

const directions = [
    {key: "0.0", text: "0.0", value: "0.0"},
    {key: "22.5", text: "22.5", value: "22.5"},
    {key: "45.0", text: "45.0", value: "45.0"},
    {key: "67.5", text: "67.5", value: "67.5"},
    {key: "90.0", text: "90.0", value: "90.0"}
]

const channels = [
    {ch: 65, callsign: "TEST1"},
    {ch: 49, callsign: "TEST2"},
    {ch: 29, callsign: "TEST3"}
]

export default class DirectionalSelection extends Component {
    constructor(props) {
        super(props)

        this.state = {
            channels,
            directions,
            currentValues: {}
        }
    }

    handleDropdownChange = (e, index, { value }) => {
        this.setState(({ currentValues }) => {
            currentValues[index] = value
            return currentValues
        })
    }

    handleDirAddition = (e, index, { value }) => {
        this.setState(({ directions }) => {
            directions[index] = [{ text: value, value }, ...this.state.directions]
            return directions
        })
    }

    render() {
        const { channels, currentValues, directions } = this.state
        return (
            <div>
                <List>
                    {channels.map((el, index) => (
                        <List.Item key={index}>
                            <Label>{el.ch}</Label>
                            <Dropdown
                                search
                                multiple
                                selection
                                scrolling
                                allowAdditions
                                options={directions}
                                value={currentValues[index]}
                                placeholder='Choose directions'
                                onAddItem={this.handleDirAddition.bind(this, index)}
                                onChange={this.handleDropdownChange.bind(this, index)}
                            />
                        </List.Item>
                    ))}
                </List>
            </div>
        )
    }
}

现在，每当我在任何频道上选择下拉值时，currentValues都会返回[object Object]: ["22.5", "45.0"]。我想将ch中的channels键设置为键，将下拉值数组设置为值，并将它们附加到currentValues。

我希望我已经澄清了足够理解的问题。以下是使用https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-allow-additions的原始组件的Semantic-UI-React文档的链接。谢谢你的帮助！

Answer 1

我明白了！这很简单，只需将<tr is="table-row" v-for="service in services" :service="service"> Vue.component('table-row', { template: '\<tr>\ <th>\ {{ service.servicesName }}\ </th>\ <th>\ {{ service.price }}\ </th>\ \</tr>\ ', props: ['service'] })中的参数切换为handleDropdownChange = (e, index, { value })即可。它将事件函数设置为对象键。

如何为每个动态元素设置多个下拉值Semantic UI React

1 个答案: