[英]Want to fetch td select box selected value using jQuery in vertical way
[英]Controlling the way selected value inside the select box looks : Is there a way to render the selected item separately?
我正在使用antd' 选择框。 我尝试自定义Option
中的内容,该内容包含一些 JSX 的常规text
。 它看起来如下:
这里也是我在沙盒上准备的小demo:
由于我已经自定义了Option
的内容,因此当我使用 Select Box 做出选择时,它会显示为:
如您所见,选择框试图显示所有内容。 有没有一种方法可以控制在选择框做出选择后选择框的外观? 我只想在选择后显示名称。 例如,选择第一个选项时必须显示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")
);
从您的评论中引用:
要修复您的警告,在customizedDisplayOnSelection
和getSelectedMeta
您应该返回一个ReactNode
而不是string
,例如您可以只返回null
,这是一个有效的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>
);
检查固定示例:
我能够通过Select
框上的 antd value
属性来实现这一点。 这是我在沙箱中更新的演示:
为了方便参考,我也在这里发布代码:
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")
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.