Javascript 在React中设置所选值的选项标签

使用React，我想为我的选择设置一个默认值，并在选项中显示标签。 这就是我到目前为止建立的：

<Select showSearch style = {{ width: '100%' }}
                   placeholder = "Selection la choix de votre numéro de téléphone "
                   optionFilterProp = "children"
                   onChange = {handleChangeSelect}

                   defaultValue = {extraitMP3[ids].Mp3[idJson].visibilite}
                   onFocus = {handleFocusSelect}
                   onBlur = {handleBlurSelect}
                   filterOption = {(input, Option) => Option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>

    <Option value = "1"> Visible dans la recherche et sur ma fiche </Option>
    <Option value = "2"> Visible sur ma fiche uniquement </Option>
    <Option value = "3"> Masqué </Option>
</Select>

Option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0}>
可见的沼泽地和沼泽地
马菲什唯一可见表面
马斯奎埃

---

现在的结果是显示{extraitMP3[ids].Mp3[idJson].visibilite}，它等于一个选项值，但我想显示的是选项标签。要在默认值中将显示内容从值更改为其标签，您可以将选项存储在地图中，然后查找选项的文本：

组件模块中的某个位置，而不是组件本身（无需一直重新创建）：

然后在渲染时，查找它：

defaultValue={selectOptions.get(extraitMP3[ids].Mp3[idJson].visibilite)}

另外，使用贴图渲染选项。因此，渲染代码看起来像：

<Select
            showSearch
            style={{ width: '100%' }}
            placeholder="Selection la choix de votre numéro de téléphone "
            optionFilterProp="children"
            onChange={handleChangeSelect}

            defaultValue={selectOptions.get(extraitMP3[ids].Mp3[idJson].visibilite)}
            onFocus={handleFocusSelect}
            onBlur={handleBlurSelect}
            filterOption={(input, Option) => Option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
          {[...selectOptions].map(([value, label]) => <Option value="{value}"> {label} </Option>)}
</Select>

Option.props.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0}
>
{[…selectOptions].map（（[value，label]）=>{label}

我完全按照你说的做了，我得到了：

TypeError:selectOptions.entries（…）.map不是一个函数

@Ahmed-我的错，我忘了传播它们了。如果是分散的，则不需要

条目

。查看更新后的答案（唯一不同的是我们输出选项的位置）。现在它工作了，但没有设置默认值，所以我做了一个：

{console.log（'Select options'，selectOptions.get（extratitmp3[ids].Mp3[idJson].visibilite））

，它是未定义的，{console.log（'Select Options'，extraitMP3[ids].Mp3[idJson].visibilite）}正在给我results@Ahmed-这告诉我们，

extraitMP3[ids].Mp3[idJson].visibilite

不是值的

===

匹配。（映射的

get

要求键的

==

匹配。）也许这是一个数字而不是字符串；如果是这样，请将地图更改为使用数字作为键而不是字符串。您是唯一可以检查这一点的人。

<Select
            showSearch
            style={{ width: '100%' }}
            placeholder="Selection la choix de votre numéro de téléphone "
            optionFilterProp="children"
            onChange={handleChangeSelect}

            defaultValue={selectOptions.get(extraitMP3[ids].Mp3[idJson].visibilite)}
            onFocus={handleFocusSelect}
            onBlur={handleBlurSelect}
            filterOption={(input, Option) => Option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
          {[...selectOptions].map(([value, label]) => <Option value="{value}"> {label} </Option>)}
</Select>