将自定义多选下拉菜单中的选定选项显示为标签 - React

Question

我有自定义的多选下拉菜单，实现如下：

    const RequestExpertSupport = function Basic({
    data,
    onSelectedItemsChanged,
    selectedItemsIndices,
}) {
    const props = {
        data: [
            "My account and profile",
            "Understanding my footprint",
            "Target setting",
            "Specific actions",
            "Creating a plan",
            "Finance, funding and grants ",
            "Using the Carbon Planner platform",
            "Other",
        ],
        selectedItemsIndices: [],
    };

    //
    const handleSelectedItemsChanged = useCallback(
        selectedItemsIndices => {
            onSelectedItemsChanged(selectedItemsIndices);
        },
        [onSelectedItemsChanged]
    );

    function onSelectedItemsChanged(selectedItemsIndices) {
        console.log(selectedItemsIndices);
    }

    function renderItem(datum, index) {
        return <span>{datum}</span>;
    }

    return (
        <RequestExpertSupportDiv>
            <div className="container">
                <div className="formContainer">
                    <form>
                        <label className="helpLabel">What would you like help with?</label>
                        <DropdownListTrigger
                            dropdownList={
                                <MultiSelectDropdownList
                                    id="multiSelectDrop"
                                    data={props.data}
                                    onSelectedItemsChanged={handleSelectedItemsChanged}
                                    renderItem={renderItem}
                                    selectedItemsIndices={selectedItemsIndices}
                                />
                            }
                            position="right"
                            className="ddlFilter"
                        >
                            <button className="zb-button zb-button-secondary zb-button-with-icon-after">
                                <span>Choose topic(s)</span>
                                <Icon
                                    name="chev-down-xsmall"
                                    style={{
                                        verticalAlign: "text-bottom",
                                    }}
                                    title={null}
                                />
                            </button>
                        </DropdownListTrigger>
                        <div className="selectedTopics">Selected topics are:</div>
                        <label className="tellUsLabel">What would you like help with?</label>
                        <textarea
                            name="helpReview"
                            rows="4"
                            cols="43"
                            className="textArea"
                            style={{ width: "410px", height: "290px", marginTop: "2%" }}
                            placeholder="Type your message here ..."
                        ></textarea>

                        <button className="sendBtn" name="sendBtn">
                            Send
                        </button>
                    </form>
                </div>
            </div>
        </RequestExpertSupportDiv>
    );
};

export default RequestExpertSupport;

此代码获取多选下拉菜单中选定选项的索引。

function onSelectedItemsChanged(selectedItemsIndices) {
    console.log(selectedItemsIndices);
}

控制台如下：

现在我想将这些选定的选项显示为这样的标签：

这是标签的代码：

<Div
    flex="flex"
    display="inline-flex"
    height="36px"
    borderWidth="1px solid #009FAC"
    borderRadius="3px"
    backgroundColor="#def8fa"
    justifyContent="space-around"
    alignItems="center"
    marginRight="10px"
    marginBottom="10px"
    style={{ minWidth: "92px", maxWidth: "175px" }}
>
    <span
        padding="0px"
        fontSize="14px"
        lineHeight="20px"
        fontWeight="400"
        marginLeft="5px"
        marginRight="5px"
        style={{ maxWidth: "142px" }}
    >
        // need to put selected options here
    </span>
    <img name="close-inverted-small" onClick={event => removeSelectedTopic(event, topicId)} />
    &nbsp;
</Div>

我不知道如何将function SelectedItemsChanged(selectedItemsIndices) 与tags 前端代码链接到dosplay 选定的选项作为标签...

Answer 1

您需要将最后一部分的所有代码放入循环中以呈现数据。例如，您应该使用selectedItemIncedies 和data 编写如下最后一部分：

{ selectedItemIncedies.map ((selectedItemIndex) => { return (<Div
flex="flex"
display="inline-flex"
height="36px"
borderWidth="1px solid #009FAC"
borderRadius="3px"
backgroundColor="#def8fa"
justifyContent="space-around"
alignItems="center"
marginRight="10px"
marginBottom="10px"
style={{ minWidth: "92px", maxWidth: "175px" }}

<span
    padding="0px"
    fontSize="14px"
    lineHeight="20px"
    fontWeight="400"
    marginLeft="5px"
    marginRight="5px"
    style={{ maxWidth: "142px" }}
>
    {data.find((item, index)=> index===selectedItemIndex)}
</span>
<img name="close-inverted-small" onClick={event => removeSelectedTopic(event, topicId)} />
&nbsp;
</Div>)})}

Answer 2

您需要使用基于selectedItemsIndices 数组的map 来呈现标签。首先，将selectedItemsIndices 数组作为道具传递给 TagListComponent。

设置完成后，在 TagListComponent 的 selectedItemsIndices 中渲染每个选定的标签

TagListComponent.js

    const TagListComponent = function Basic({
        selectedItemsIndices,
    }) {
        return (
            <div>
                {selectedItemsIndices.map((selectedItemIndex, index) => {
                    return (
                        <div>
                            <span>{data[selectedItemIndex]}</span>
                        </div>
                    );
                })}
            </div>
        );
    };

    export default TagListComponent;

在上面的 <span/> 标记中，为标记本身添加任何您喜欢的样式。