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

Question

使用 React 我想为我的 select 设置默认值并在选项中显示标签。这是我到目前为止构建的：

<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>

现在的结果显示 {extraitMP3[ids].Mp3[idJson].visibilite} 等于其中一个选项值，但我想显示的是选项标签。在 defaulValue

中更改从值显示到它们的标签的任何帮助

Answer 1

您可以将选项存储在地图中，然后查找选项的文本：

在组件模块中的某处但不在组件本身中（不需要一直重新创建它）：

const selectOptions = new Map([
    ["1", "Visible dans la recherche et sur ma fiche"],
    ["2", "Visible sur ma fiche uniquement"],
    ["3", "Masqué"],
]);

然后渲染的时候查一下：

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>

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

set option label of selected value in React

html

javascript

select

default-value

reactjs