使用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>
现在结果显示为{extraitMP3 [ids] .Mp3 [idJson] .visibilite},它等于选项值之一,但我要显示的是选项标签。在defaulValue中将值显示的内容更改为标签的任何帮助
答案 0 :(得分: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>