控制选择框内的所选值的方式:是否可以单独渲染所选项目? [英] Controlling the way selected value inside the select box looks : Is there a way to render the selected item separately?

问题描述

我正在使用 antd'选择框.我尝试自定义Option中的内容，该内容包含一些JSX的常规text.它看起来如下:

I am working with the antd' select box. I tried to customise the content inside Option which holds the regular text with some JSX. It looks as follows:

这也是我在沙盒上准备的小型演示:

Here is also the small demo I prepared on sandbox:

由于我已经自定义了Option中的内容，因此当我使用选择框"做出选择时，它显示为:

Since I have customised the content inside the Option, the moment I make a choice with the Select Box, it gets shown as:

如您所见，选择框尝试显示所有内容.用选择框做出选择后，有什么方法可以控制选择框的外观吗?我只希望在选择后显示名称.例如，选择第一个选项时，必须显示product-1.

As you could see, the select box tries to show everything. Is there a way I could control how the select box looks just after the choice is made with the select box? I just want the name to be displayed after the selection is made. For example, product-1 must be displayed when the first option is selected.

为便于参考，我还将代码发布在这里:

For easier reference, I am also posting the code here:

    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")
);

推荐答案

我能够通过Select框上antd的value属性实现此目的.这是我在沙箱中更新的演示:

I was able to achieve this with the antd's value property on Select box. Here is the demo I updated in sandbox:

为便于参考，我还将代码发布在这里:

For easier reference, I am also posting the code here:

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")
);

这篇关于控制选择框内的所选值的方式:是否可以单独渲染所选项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！