Html reactjs-下拉选择，包含2个字段

我试图用两个字段编写一个select组件，与前面的类似。我研究过antd、bootstrap、semantic等，但没有看到类似的组件，所以我想知道是否有人知道可以实现这一点的包/库。还是我最好将其编码为带有两个选项卡的下拉列表，每个选项卡作为一个输入字段

---

不确定这是否是您想要的，但您可以构建自己的自定义选择组件，如下所示：

类选择扩展了React.Component{
状态={
活动菜单：“分钟”，
开放：是的，
最小：''，
最大值：“”
};
toggleMenu=e=>{
这是我的国家({
活动菜单：e.target.name
});
};
toggleOpen=（）=>{
this.setState（prevState=>{
返回{open:！prevState.open}
});
};
getMenuOptions=（）=>{
让期权=[]；
开关（this.state.activeMenu）{
案例“min”：{
选项=['1000美元'，'2000美元'，'3000美元'，'4000美元'，'No Min']；
打破
}
案例“max”：{
选项=[‘1000美元’、‘2000美元’、‘3000美元’、‘4000美元’、‘无上限’]；
打破
}
}
返回选项.map（（选项，i）=>{
返回(

{option}

)
});
};
handleSelect=（菜单，值）=>{
这是我的国家({
[菜单]：值
});
};
render（）{
const{open，min，max，activeMenu}=this.state；
const menuOptions=this.getMenuOptions（）；
返回(
租金范围
{打开&&(
-

{menuOptions}

)}
)
}
}
ReactDOM.render（，document.getElementById（'root'））
span{
显示：块；
光标：指针；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充物：5px；
}
李：悬停{
光标：指针；
}
ul.max{
浮动：对；
}
.选择{
宽度：300px；
边框：1px实心#222；
溢出：隐藏；
}