代码之家 › 专栏 › 技术社区 › CCCC

Antd Select-如何在下拉列表和输入字段中显示不同的值

antd reactjs css javascript

CCCC · 技术社区 · 2 年前

当前UI

预期行为

我该怎么做?

应用.tsx

import React from "react";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

const countryNames = [
  {
    name: "Japan",
    code: "+987"
  },
  {
    name: "aVeryVeryVeryVeryLongCountryName",
    code: "+123"
  }
];

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const App: React.FC = () => (
  <>
    <Select defaultValue="Japan" onChange={handleChange}>
      {countryNames.map((country) => (
        <Option key={country.name} value={country.name}>
          {`${country.code} ${country.name}`}
        </Option>
      ))}
    </Select>
  </>
);

export default App;

Codesandbox
https://codesandbox.io/s/basic-usage-antd-5-1-5-forked-mfw8fj?file=/demo.tsx

1 回复 | 直到 2 年前

John Li 2 年前

根据 antd document , Select 可以从中指定标签值 Option 道具 optionLabelProp ,在本用例中可以从中获取值 country.code .

用于扩展的大小 选项 基于其内容, dropdownMatchSelectWidth 可以设置 false ,因此 选项 不限于的大小 选择 .

修改了演示: codesandbox

<Select
  defaultValue="Japan"
  onChange={handleChange}
  // ð Specify label prop here
  optionLabelProp="label"
  // ð Set Option to be extendable by content here
  dropdownMatchSelectWidth={false}
>
  {countryNames.map((country) => (
    <Option
      key={country.name}
      value={country.name}
      // ð Give label value for Select here
      label={country.code}
    >
      {`${country.code} ${country.name}`}
    </Option>
  ))}
</Select>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前