javascript - 控制选择框中所选值的外观:有没有办法单独呈现所选项目?
问题描述
我正在使用antd' 选择框。我尝试使用一些 JSX自定义Option
其中包含常规的内容。text
它看起来如下:
这里也是我在沙盒上准备的小demo:
由于我已经自定义了里面的内容Option
,所以当我使用选择框做出选择时,它会显示为:
如您所见,选择框试图显示所有内容。有没有一种方法可以在使用选择框做出选择后控制选择框的外观?我只想在选择后显示名称。例如,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
应该返回 aReactNode
而不是 a 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>
);
检查固定示例:
推荐阅读
- mongodb - 无法从 SpringBoot 应用程序连接到 CosmosDb Mongo Api
- cmake - GTEST_FOUND 之类的变量是如何设置的?
- sql - 通过分组更新列
- c# - Visual Studio 不支持代码解析或生成,因为它不包含在支持代码的项目中
- javascript - 如何仅使用 Javascript 在 div 中显示整个选择元素
- ios - CoreStore 重新获取谓词 NSFetchRequest 问题
- php - 如何从excel文件中导入数据并识别子类别
- javascript - 使用 javascript 打印页面元素时指定文件名
- angular - CognitoUser:“可观察”类型上不存在属性“属性”
' - angular - 如何避免“意外模块 'HttpClientModule' ...注释”错误?