如何控制Antd Select组件选中项的显示内容？

我懂你的需求——自定义Option展示产品多维度信息，但选中后只想显示产品名称对吧？这是Antd Select使用中非常常见的场景，咱们通过labelInValue属性就能轻松搞定这个问题。

核心思路 #

当你自定义Option内部的DOM结构时，Select默认会把Option里的所有内容转换成纯文本，作为选中后的显示值。要控制这个显示效果，我们需要明确告诉Select选中后应该展示什么文本：labelInValue属性会让Select的value变成一个包含key（对应Option的value值）和label（选中后要显示的文本）的对象，同时给每个Option指定label属性即可。

修改后的完整代码 #

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";
const { Option } = Select;
const data = [
  { productName: "product-1", productExternalId: "DT01A", productionExternalId: "PL-DT01A", quantity: "700 kg" },
  { productName: "product-2", productExternalId: "DT01A", productionExternalId: "PL-DT01A", quantity: "700 kg" },
  { productName: "product-3", productExternalId: "DT01A", productionExternalId: "PL-DT01A", quantity: "700 kg" }
];
const ProductSelectBox = React.memo(props => {
  const { details } = props;
  
  function onSelect(value, option) {
    // 此时value是包含key和label的对象，比如 { key: "product-1", label: "product-1" }
    console.log("选中的产品信息：", value);
  }
  
  function customizedOption({ productName, productExternalId, productionExternalId, quantity }) {
    return (
      <Option 
        className="product-select-box-item" 
        key={productName} 
        value={productName} 
        label={productName} // 在这里指定选中后要显示的文本
      >
        <div className="d-flex flex-column">
          <div className="d-flex" style={{ marginBottom: "0.2rem" }}>
            <div className="mr-auto-1 font-weight-bold">{productName}</div>
            <div className="uppercase">{productionExternalId}</div>
          </div>
          <div className="d-flex" style={{ marginBottom: "0.01rem" }}>
            <div className="mr-auto-1 uppercase">{productExternalId}</div>
            <div>{quantity}</div>
          </div>
        </div>
      </Option>
    );
  }
  
  return (
    <Select
      labelInValue // 开启这个属性，让value变为包含key和label的对象
      defaultValue={{ key: "product-3", label: "product-3" }} // 对应调整默认值的格式
      className="product-select-box"
      size="large"
      onSelect={onSelect}
    >
      {details.map(product => customizedOption(product))}
    </Select>
  );
});
ReactDOM.render(
  <div>
    <ProductSelectBox details={data} />
  </div>,
  document.getElementById("container")
);

关键修改点 #

• 给Select组件添加labelInValue属性，开启值与标签分离的模式
• 给每个Option组件添加label={productName}，明确指定选中后要显示的文本内容
• 如果需要设置默认选中项，将defaultValue调整为{ key: "xxx", label: "xxx" }的对象格式

这样修改后，不管你的Option内部有多么复杂的布局，选中后Select都会只显示你指定的产品名称，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Amanda