Как установить несколько раскрывающихся значений для каждого динамического элемента Semantic UI React

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.

Надеюсь, я прояснил вопрос достаточно, чтобы понять. Вот ссылка на документы Semantic-UI-React с исходным компонентом, который я использую: https://react.semantic -ui.com / modules / dropdown # dropdown-example-множественный-allow-дополнения . Спасибо за помощь!

Answer 1

Я понял это! Это было так просто, просто нужно было переключить параметры в handleDropdownChange = (e, index, { value }) на handleDropdownChange = (index, e, { value }). Он устанавливал функцию события в качестве клавиши объекта.