英文:
Selected value in AntD Select
问题
我正在使用AntD选择组件，如附图所示，选择其任何选项时，AntD选择会显示“id”而不是“name”。是否有解决方法？
const MyComponent = () => {
const data = [
{
id: "5c83c2d0-e422-4eb6-b2cb-02fe60045e6e",
name: "Item 1"
},
{
id: "1b9175f9-750a-48c1-bbf7-0ff9a2fde7da",
name: "Item 2"
}
];
return (
<Select>
{data.map((item) => (
<Option value={item.id} key={item.id}>{item.name}</Option>
)}
</Select>
);
};
英文:
I'm using the AntD select component, and as you can see in the attached image, when selecting any of its options, AntD select displays "id" rather than "name." Is there a fix for this?
const MyComponent = () => {
const data = [
{
id: "5c83c2d0-e422-4eb6-b2cb-02fe60045e6e"
name: "Item 1"
},
{
id: "1b9175f9-750a-48c1-bbf7-0ff9a2fde7da"
name: "Item 2"
}
];
return (
<Select>
{data.map((item) => (
<Option value={item.id} key={item.id}>{item.name}</Option>
)}
</Select>
);
};
答案1
得分: 1
Ant Design 的 <Option> 组件具有一个名为 label 的属性，用于更改显示的文本。
所以，不要将 item.name 作为子组件传递，而是将其作为 label 属性传递：
return (
<Select>
{data.map(item => (
<Option value={item.id} key={item.id} label={item.name} />
)}
</Select>
);
英文:
The Ant design <Option> has a prop named label to alter the shown text.
So instead of passing item.name as a child components, pass it as the label prop:
return (
<Select>
{data.map(item => (
<Option value={item.id} key={item.id} label={item.name} />
)}
</Select>
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论