- 首页
- 前端开发
- 控制选择框内选定值的外观:有没有办法单独呈现选定的项目?
控制选择框内选定值的外观:有没有办法单独呈现选定的项目?
[英] Controlling the way selected value inside the select box looks : Is there a way to render the selected item separately?
本文介绍了控制选择框内选定值的外观:有没有办法单独呈现选定的项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用
这里也是我在沙盒上准备的小demo:
因为我已经自定义了 Option 中的内容，所以当我用选择框做出选择时，它会显示为:
如您所见，选择框试图显示所有内容.有没有一种方法可以控制在选择框做出选择后选择框的外观?我只想在选择后显示名称.例如，选择第一个选项时必须显示product-1.
为了便于参考，我也在此处发布代码:
import React from "react";从react-dom"导入 ReactDOM；导入antd/dist/antd.css"；导入./index.css"；import { Select } from "antd";const { 选项 } = 选择；常量数据 = [{productName: "product-1",productExternalId: "DT01A",productionExternalId: "PL-DT01A",数量:700 公斤"},{productName: "product-2",productExternalId: "DT01A",productionExternalId: "PL-DT01A",数量:700 公斤"},{productName: "product-3",productExternalId: "DT01A",productionExternalId: "PL-DT01A",数量:700 公斤"}];const ProductSelectBox = React.memo(props => {const { 详细信息 } = 道具；函数 onSelect(值，选项){控制台日志(值，.."，选项)；}功能定制选项({产品名称，产品外部 ID，生产外部ID，数量}) {返回 (<选项className="product-select-box-item"键={产品名称}价值={产品名称}><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 className="d-flex" style={{ marginBottom: "0.01rem" }}><div className="mr-auto-1 uppercase">{productExternalId}</div><div>{数量}</div>
</选项>);}返回 (<选择//标签输入值//defaultValue={{ key: "product-3", label: "product-3" }}className="产品选择框"大小=大"onSelect={onSelect}>{details.map(product =>customizedOption(product))});});ReactDOM.render(<div><ProductSelectBox details={data}/>
,document.getElementById("容器"));
解决方案
我能够通过 Select 框上的 antd 的 value 属性来实现这一点.这是我在沙箱中更新的演示:
为了便于参考，我也在此处发布代码:
import React, { useState } from "react";从react-dom"导入 ReactDOM；导入antd/dist/antd.css"；导入./index.css"；import { Select } from "antd";const { 选项 } = 选择；常量数据 = [{productName: "product-1",productExternalId: "DT01A",productionExternalId: "PL-DT01A",数量:700 公斤"},{productName: "product-2",productExternalId: "DT02A",productionExternalId: "PL-DT02A",数量:702 公斤"},{productName: "product-3",productExternalId: "DT03A",productionExternalId: "PL-DT03A",数量:703 公斤"}];const ProductSelectBox = React.memo(props => {const { 详细信息 } = 道具；让 { defaultSelected } = 道具；const productMap = {};详细信息.forEach(产品=> {productMap[product.productName] = 产品；});const [selectedProduct, selectProduct] = useState(defaultSelected);函数 onSelect(value) {选择产品(价值)；}功能定制的DisplayOnSelection(产品名称){如果(产品地图[产品名称]){const productExternalId = productMap[productName]["productExternalId"];返回 (<span className="font-weight-medium">{productExternalId} - {productName}</span>);} 别的 {返回 "";}}函数 getSelectedMeta() {如果 (productMap[selectedProduct]) {返回 (<span className="font-weight-medium">(<span className="大写">生产 ID:{productMap[selectedProduct]["productionExternalId"]}</span><span style={{ marginLeft: "0.75rem" }}>批量大小:{productMap[selectedProduct]["quantity"]}</span>)</span>);} 别的 {返回 "";}}功能定制选项({产品名称，产品外部 ID，生产外部ID，数量}) {返回 (<选项className="product-select-box-item"键={产品名称}价值={产品名称}><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 className="d-flex" style={{ marginBottom: "0.01rem" }}><div className="mr-auto-1 uppercase">{productExternalId}</div><div>{数量}</div>
</选项>);}返回 (<div className="d-flex flex-row"><选择className="product-select-box auto-flex"大小=大"值={customizedDisplayOnSelection(selectedProduct)}onSelect={onSelect}>{details.map(product =>customizedOption(product))}<div className="d-flex align-items-center auto-flex">{getSelectedMeta()}
);});ReactDOM.render(<div><ProductSelectBox details={data} defaultSelected=""/>
,document.getElementById("容器"));
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:
Since I have customised the content inside the Option, the moment I make a choice with the Select Box, it gets shown as:
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")
);
解决方案
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屋！
查看全文
