我要自定义antd Select
。当用户单击Select
时,蚂蚁Option
应该显示在蚂蚁Select
上方,而不是显示在Select
下方
antd Select
:https://ant.design/components/select/
预期的行为: 1
实际行为: 2
JSX
import { FaPlane, FaWater } from "react-icons/fa";
//outside of class
const shipmentType = {
sea: [
{ name: "FCL", desc: "FULL CONTAINER LOAD" },
{ name: "LCL", desc: "LESS CONTAINER LOAD" }
],
air: [{ name: "AIR", desc: "AIR DELIVERY" }]
};
//inside of class
render(){
return(
<Select
className="container-dropdown"
onChange={this.onSelectChange}
defaultValue={
<DisplayContainer data={shipmentType.sea[0]} />
}
key={ shipmentType.sea[0]}
>
<Option value={shipmentType.sea[0].name}>
<DisplayContainer data={shipmentType.sea[0]} />
</Option>
<Option value={shipmentType.sea[1].name}>
<DisplayContainer data={shipmentType.sea[1]} />
</Option>
</Select>
);
}
DisplayContainer.js组件
const DisplayContainer = ({ data }) => {
return (
<div
style={{
width: "120px",
height: "45px",
display: "flex",
flexFlow: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<span
style={{
display: "block",
fontSize: "8px",
padding: "5px 0px 0px 10px"
}}
>
{data.desc}
</span>
<span style={{ padding: "2px 0px 0px 14px" }}>
{data.name === "AIR" ? <FaPlane /> : <FaWater />}
<span
style={{ display: "inline", marginLeft: "14px", fontSize: "16px" }}
>
{data.name}
</span>
</span>
</div>
);
};
App.css
.container-dropdown {
height: 53px;
width: 140px;
border: 0px solid white;
border-radius: 0px;
cursor: pointer;
font-size: 18px;
margin: 0px;
padding: 0px;
}
custom-antd.css
.ant-select-selection.ant-select-selection--single {
border-radius: 0px 8px 8px 0px;
height: 53px;
}
.ant-select-selection-selected-value {
height: 53px;
padding: 0px;
margin: 0px;
}
.ant-select-selection__rendered {
padding: 0px;
margin: 0px;
}
.ant-select-dropdown-menu.ant-select-dropdown-menu-root.ant-select-dropdown-menu-vertical {
padding: 0px;
margin: 0px;
}
.ant-select-dropdown-menu-item {
padding: 0px;
margin: 0px;
}
我该如何实现?我已经花了几个小时的时间。但我无法成功。我会感激你的谢谢
编辑01:
用户单击Select
框
我希望顶部的Option
(即FCL
)向上并覆盖Select
框,如下所示:
我不希望Options
框下面都显示FCL
(即LCL
和Select
):
答案 0 :(得分:3)
我相信我已经能够接近您想要实现的目标。以下是更新的 custom-antd.css 文件。
.ant-select-selection-selected-value {
border-radius: 0px 8px 8px 0px;
height: 53px;
}
.ant-select-selection.ant-select-selection--single {
height: 53px;
}
.ant-select-selection.ant-select-selection--single
> div
> div
> div
> div
+ div {
margin-top: -5px;
padding: 4px 5px 5px 14px !important;
}
.ant-select-selection.ant-select-selection--single > div > div > div > div {
margin-top: -20px;
}
.ant-select-selection.ant-select-selection--single[aria-expanded="true"]
> div
> div
> div
> div {
margin-top: -10px;
}
/*style for when the menu is expanded: show shipment description above icon and name*/
.ant-select-selection.ant-select-selection--single[aria-expanded="true"]
> div
> div
> div
> div
+ div {
margin-top: -15px;
}
完整的代码沙箱位于here。
基本上,您要做的是使用组合器来选择特定的div
作为名称,描述等。蚂蚁的设计嵌套在它们的结构中。
编辑
为了获得下拉菜单以根据当前选择的内容显示不同的数据(仅在选择FCL时显示LCL,反之亦然),您可以利用handleChange函数来过滤原始货运数据,以便返回所有当前未选择(例如,选择FCL时显示不带FCL的LCL)。通过将原始装运数据与第二个阵列(已过滤的菜单数据)一起存储在状态中,您可以使用/更新第二个阵列作为选择选项。
这是你的状态。
this.state = {
shipmentArr: [],
shipmentType: {
sea: [
{ name: "FCL", desc: "FULL CONTAINER LOAD" },
{ name: "LCL", desc: "LESS CONTAINER LOAD" }
],
air: [{ name: "AIR", desc: "AIR DELIVERY" }]
}
};
这是新的handleChange
。
handleChange = value => {
var newShipmentType = this.state.shipmentType.sea.filter(x => {
return x.name !== value;
});
this.setState({
shipmentArr: newShipmentType
});
};
这里是componentDidMount
(正在使用handleChange
)。
componentDidMount = () => {
this.handleChange(this.state.shipmentType.sea[0].name);
};
下面是更新的Select
组件。
<Select
className="container-dropdown"
onChange={this.handleChange}
open={true} // USE THIS FOR DEBUGGING.
defaultValue={
<DisplayContainer data={this.state.shipmentType.sea[0]} />
}
key={this.state.shipmentArr[0]}
>
{this.state.shipmentArr.map(x => {
return (
<Option value={x.name}>
<DisplayContainer data={x} />
</Option>
);
})}
</Select>
查看完整的updated codepen。