Javascript 控制“选择”框中选定值的外观：是否有单独渲染选定项的方法？

我在和一家公司合作。我试着在

选项

中定制内容，该选项使用一些JSX保存常规的

文本。情况如下：


下面是我在sandbox上准备的小演示：


由于我已自定义了
选项中的内容
，因此当我使用选择框进行选择时，它将显示为：


如您所见，选择框尝试显示所有内容。是否有一种方法可以在使用选择框进行选择之后控制选择框的外观？我只想在选择后显示名称。例如，选择第一个选项时，必须显示
product-1

为了便于参考，我也在这里发布代码：

    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) {
    console.log(value, "..", option);
  }

  function customizedOption({
    productName,
    productExternalId,
    productionExternalId,
    quantity
  }) {
    return (
      <Option
        className="product-select-box-item"
        key={productName}
        value={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
      // 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")
);

import React, { useState } 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: "DT02A",
    productionExternalId: "PL-DT02A",
    quantity: "702 kg"
  },
  {
    productName: "product-3",
    productExternalId: "DT03A",
    productionExternalId: "PL-DT03A",
    quantity: "703 kg"
  }
];

const ProductSelectBox = React.memo(props => {
  const { details } = props;
  let { defaultSelected } = props;

  const productMap = {};
  details.forEach(product => {
    productMap[product.productName] = product;
  });

  const [selectedProduct, selectProduct] = useState(defaultSelected);

  function onSelect(value) {
    selectProduct(value);
  }

  function customizedDisplayOnSelection(productName) {
    if (productMap[productName]) {
      const productExternalId = productMap[productName]["productExternalId"];
      return (
        <span className="font-weight-medium">
          {productExternalId} - {productName}
        </span>
      );
    } else {
      return "";
    }
  }

  function getSelectedMeta() {
    if (productMap[selectedProduct]) {
      return (
        <span className="font-weight-medium">
          (
          <span className="uppercase">
            production id: {productMap[selectedProduct]["productionExternalId"]}
          </span>
          <span style={{ marginLeft: "0.75rem" }}>
            Batch Size: {productMap[selectedProduct]["quantity"]}
          </span>
          )
        </span>
      );
    } else {
      return "";
    }
  }

  function customizedOption({
    productName,
    productExternalId,
    productionExternalId,
    quantity
  }) {
    return (
      <Option
        className="product-select-box-item"
        key={productName}
        value={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 (
    <div className="d-flex flex-row">
      <Select
        className="product-select-box auto-flex"
        size="large"
        value={customizedDisplayOnSelection(selectedProduct)}
        onSelect={onSelect}
      >
        {details.map(product => customizedOption(product))}
      </Select>
      <div className="d-flex align-items-center auto-flex">
        {getSelectedMeta()}
      </div>
    </div>
  );
});

ReactDOM.render(
  <div>
    <ProductSelectBox details={data} defaultSelected="" />
  </div>,
  document.getElementById("container")
);

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Select}；
const{Option}=Select；
常数数据=[
{
产品名称：“产品-1”，
productExternalId:“DT01A”，
productionExternalId:“PL-DT01A”，
数量：“700公斤”
},
{
产品名称：“产品-2”，
productExternalId:“DT01A”，
productionExternalId:“PL-DT01A”，
数量：“700公斤”
},
{
产品名称：“产品-3”，
productExternalId:“DT01A”，
productionExternalId:“PL-DT01A”，
数量：“700公斤”
}
];
const ProductSelectBox=React.memo（props=>{
const{details}=props；
函数onSelect（值、选项）{
console.log（值“…”选项）；
}
功能自定义选项({
产品名称，
产品外部化，
productionExternalId，
量
}) {
返回(
{productName}
{productionExternalId}
{productExternalId}
{数量}
);
}
返回(
{details.map（产品=>CustomizeOption（产品））}
);
});
ReactDOM.render(
,
document.getElementById（“容器”）
);
我能够通过
选择
框上的antd的
值
属性实现这一点。以下是我在sandbox中更新的演示：


为了便于参考，我也在这里发布代码：

    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) {
    console.log(value, "..", option);
  }

  function customizedOption({
    productName,
    productExternalId,
    productionExternalId,
    quantity
  }) {
    return (
      <Option
        className="product-select-box-item"
        key={productName}
        value={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
      // 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")
);

import React, { useState } 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: "DT02A",
    productionExternalId: "PL-DT02A",
    quantity: "702 kg"
  },
  {
    productName: "product-3",
    productExternalId: "DT03A",
    productionExternalId: "PL-DT03A",
    quantity: "703 kg"
  }
];

const ProductSelectBox = React.memo(props => {
  const { details } = props;
  let { defaultSelected } = props;

  const productMap = {};
  details.forEach(product => {
    productMap[product.productName] = product;
  });

  const [selectedProduct, selectProduct] = useState(defaultSelected);

  function onSelect(value) {
    selectProduct(value);
  }

  function customizedDisplayOnSelection(productName) {
    if (productMap[productName]) {
      const productExternalId = productMap[productName]["productExternalId"];
      return (
        <span className="font-weight-medium">
          {productExternalId} - {productName}
        </span>
      );
    } else {
      return "";
    }
  }

  function getSelectedMeta() {
    if (productMap[selectedProduct]) {
      return (
        <span className="font-weight-medium">
          (
          <span className="uppercase">
            production id: {productMap[selectedProduct]["productionExternalId"]}
          </span>
          <span style={{ marginLeft: "0.75rem" }}>
            Batch Size: {productMap[selectedProduct]["quantity"]}
          </span>
          )
        </span>
      );
    } else {
      return "";
    }
  }

  function customizedOption({
    productName,
    productExternalId,
    productionExternalId,
    quantity
  }) {
    return (
      <Option
        className="product-select-box-item"
        key={productName}
        value={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 (
    <div className="d-flex flex-row">
      <Select
        className="product-select-box auto-flex"
        size="large"
        value={customizedDisplayOnSelection(selectedProduct)}
        onSelect={onSelect}
      >
        {details.map(product => customizedOption(product))}
      </Select>
      <div className="d-flex align-items-center auto-flex">
        {getSelectedMeta()}
      </div>
    </div>
  );
});

ReactDOM.render(
  <div>
    <ProductSelectBox details={data} defaultSelected="" />
  </div>,
  document.getElementById("container")
);

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Select}；
const{Option}=Select；
常数数据=[
{
产品名称：“产品-1”，
productExternalId:“DT01A”，
productionExternalId:“PL-DT01A”，
数量：“700公斤”
},
{
产品名称：“产品-2”，
productExternalId:“DT02A”，
productionExternalId:“PL-DT02A”，
数量：“702公斤”
},
{
产品名称：“产品-3”，
productExternalId:“DT03A”，
productionExternalId:“PL-DT03A”，
数量：“703公斤”
}
];
const ProductSelectBox=React.memo（props=>{
const{details}=props；
设{defaultSelected}=props；
const productMap={}；
详细信息。forEach（产品=>{
productMap[product.productName]=产品；
});
const[selectedProduct，selectProduct]=useState（默认选中）；
函数onSelect（值）{
选择产品（价值）；
}
功能自定义显示选择（productName）{
if（productMap[productName]）{
const productExternalId=productMap[productName][“productExternalId”]；
返回(
{productExternalId}-{productName}
);
}否则{
返回“”；
}
}
函数getSelectedMeta（）{
if（productMap[selectedProduct]）{
返回(
(
生产id:{productMap[selectedProduct][“productionExternalId”]}
批量大小：{productMap[selectedProduct][“数量”]}
)
);
}否则{
返回“”；
}
}
功能自定义选项({
产品名称，
产品外部化，
productionExternalId，
量
}) {
返回(
{productName}
{productionExternalId}
{productExternalId}
{数量}
);
}
返回(
{details.map（产品=>CustomizeOption（产品））}
{getSelectedMeta（）}
);
});
ReactDOM.render(
,
document.getElementById（“容器”）
);
指的是：

要修复警告，在
CustomizedDisplaySelection
和
getSelectedMeta
上，您应该返回
ReactNode
而不是
字符串，例如，您可以只返回有效的
ReactNode
或不返回任何内容

function customizedDisplayOnSelection(productName) {
  if (productMap[productName]) {
  ...
  }
  // or
  else {
    return null;
  }
}

此外，您还可以利用
&
短路

const customizedDisplayOnSelection = productName =>
  productMap[productName] && (
    <span className="font-weight-medium">
      {productMap[productName].productExternalId} -{productName}
    </span>
  );

const customizedDisplaySelection=productName=>
productMap[productName]&&(
{productMap[productName].productExternalId}-{productName}
);

检查固定示例：

谢谢。有没有办法将
标签
和实际的
值
分开？例如，当前我将该值设置为
ReactNode
。但是当我查询字段时（使用validateFields或getFieldsValue），我希望结果是
productExternalId
。有办法做到这一点吗？