在 react-select 中选择父选项时出现问题

时间:2021-04-12 07:17:20

标签: reactjs react-select

我正在使用 react-select-nested-group (react-select now) 来选择嵌套选项。但我面临的问题是,当我选择父选项时,它只返回父选项,并且不会在下拉列表中选中该选项。如果选择该选项的所有子项,它可以正常工作。这是我用于选项的对象。

[
{
    "label": "AUXO",
    "value": "5e2ea0969dde260f7eec5c3b",
    "options": [
        {
            "label": "Patrolling",
            "value": "5fb4bfba5a40c28eb7932091",
            "options": [
                {
                    "label": "c1",
                    "value": "601a7c3d9bd1684e9d20bc1a",
                    "options": [
                        {
                            "label": "test 1",
                            "value": "606ff36a90264f8993266696"
                        }
                    ]
                },
                {
                    "label": "c2",
                    "value": "606ee1c190264f8993266690"
                }
            ]
        },
        {
            "label": "General",
            "value": "5fb4bfd15a40c28eb7932093",
            "options": [
                {
                    "label": "g1",
                    "value": "606ee1d190264f8993266692"
                },
                {
                    "label": "g2",
                    "value": "606ee1dc90264f8993266694"
                }
            ]
        },
        {
            "label": "Ahmed Hassan",
            "value": "60263baf132415067bd03f54"
        }
    ]
}
]

组件是这样的:

 <Select
    name={props.name}
    placeholder={props.placeholder || "Search..."}
    isMulti={props.multi || false}
    isClearable={props.clearable || true}
    isSearchable={props.searchable || true}
    isDisabled={props.disabled !== undefined ? props.disabled : false}
    hideSelectedOptions={false}
    filterOption={createFilter(filterConfig)}
    value={state.preSelected}
    options={state.options}
    components={{ Option, GroupHeading, Group, ValueContainer }}
    onChange={onChange}
  />

例如在选择巡逻时,它的预期输出应该是

[
{
    "label": "Patrolling",
    "value": "5fb4bfba5a40c28eb7932091"
},
{
    "label": "c1",
    "value": "601a7c3d9bd1684e9d20bc1a"
},
{
    "label": "test 1",
    "value": "606ff36a90264f8993266696"
},
{
    "label": "c2",
    "value": "606ee1c190264f8993266690"
}
]

但在我的情况下它只返回

{
    "label": "Patrolling",
    "value": "5fb4bfba5a40c28eb7932091"
}

0 个答案:

没有答案