React 下拉框

标签：sde   col   image   number   reac   conf   net   lists   state   

<Row className="row_gap workerFus">
　　<Col span={6} className="text_right">
　　　　{/* <div className="row_label">数据中心<span className = "colonyColor">*</span></div> */}
　　　　<b className="row_label">数据中心： </b>
　　</Col>
　　<Select
　　　　value={this.state.applyFloatIPDataCenter}
　　　　// style={{ width: "120px" }}
　　　　// defaultValue="请选择数据中心"
　　　　className="placeSelectDataCenter"
　　　　onChange={e => {
　　　　　　this.setState({ applyFloatIPDataCenter: e });
　　　　}}
　　>
　　{this.state.serviceSystemsa.map((item, key) => {
　　　　return (
　　　　<Option value={item.id} key={key}>
　　　　　　{item.name}
　　　　</Option>
　　　　);
　　})}
　　</Select>{" "}
</Row>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

{this.state.vmTypeLists.map((item, key) => {
// return <Option value={item} key={key}>{item.name}</Option>
return (
<Option
value={item.type + "," + item.flavorId + "," + item.name}
key={key}
>
{item.name}
</Option>
);
})}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

this.dataSourcess = [
{
key: ‘1‘,
name: ‘虚拟机类型‘,
// age: 32,
// age: "虚拟机1型",
age:
// <Select defaultValue="虚拟机1型"
// onChange={(e)=>{
// console.log(e,"我是虚拟机类型")
// this.setState({ virtualMachineType :e })
// }}

// >
// <Option value={1}>虚拟机1型</Option>
// <Option value={2}>虚拟机2型</Option>
// <Option value={3}>虚拟机3型</Option>
// <Option value={4}>虚拟机4型</Option>

// </Select>
<Select
// value={this.state.dataCenter}
style={{ width: ‘90%‘}}
// defaultValue="虚拟机1型"
className = "placeSelect"
onChange={(e)=>{
console.log(e,"我是虚拟机类型")
this.setState({ virtualMachineType :e })
}}
>
{
this.state.vmTypeLists.map((item,key)=>{
// return <Option value={item} key={key}>{item.name}</Option>
return <Option value={item.type + "," + item.flavorId} key={key}>{item.name}</Option>
})
// storage.getItem("images").map((item,key)=>{
// return <Option></Option>
// })
// console.log(storage.getItem("images"),"我正在测试5")


}
</Select>,
address: ‘西湖区湖底公园1号‘,
},
{
key: ‘2‘,
name: ‘所属数据中心3‘,
// age: "内网业务区",
age:
// <Select defaultValue="主数据中心-内网区"
// onChange={(e)=>{
// console.log(e,"我是虚拟机类型")
// this.setState({ virtualMachinePartition :e })
// }}
// >
// <Option value={1}>主数据中心-内网区</Option>
// <Option value={2}>主数据中心-外网区</Option>
// <Option value={3}>共享交换区</Option>
// </Select>
<Input value = {storage.getItem("selectDataCenters")}
// onChange={(e)=>{
// console.log(e,"我是虚拟机类型")
// this.setState({ virtualMachinePartition :e })
// }}
ref = "dataCenter"
/>,
address: ‘西湖区湖底公园1号‘,
},
{
key: ‘3‘,
name: ‘虚拟机镜像1‘,
// age: "镜像1",
age:
// <Select defaultValue="镜像1"
// onChange={(e)=>{
// console.log(e,"我是虚拟机类型")
// this.setState({ virtualMachineImage :e })
// }}
// >
// <Option value="镜像1">镜像1</Option>
// <Option value="镜像2">镜像2</Option>
// <Option value="镜像3">镜像3</Option>
// <Option value="镜像4">镜像4</Option>
// </Select>,
<Select
// value={this.state.TVTSDefault}
// onChange={this.changeTVTS.bind(this)}
onChange={(e)=>{
console.log(e,"我是虚拟机类型")
this.setState({ virtualMachineImage :e })
}}
>
{
// this.state.imagess.map((item,key)=>{
// return <Option value={item} key={key}>{item.name}</Option>
// })
// storage.getItem("imagess").map((item,key)=>{
// return <Option value={item.id} key={key}>{item}</Option>
// })
this.state.imagess.map((item,key)=>{
return <Option value={item.name + "," + item.imageId} key={key}>{item.name}</Option>
})
}
</Select>,
address: ‘西湖区湖底公园1号‘,
},
{
key: ‘4‘,
name: ‘是否绑定浮动IP‘,
age: <Select defaultValue="是否绑定浮动IP"
onChange={(e)=>{
console.log(e,"我是虚拟机类型")
this.setState({ virtualMachineIsNot :e })
}}
>
<Option value={this.state.Boolean}>是</Option>
<Option value={this.state.Booleans}>否</Option>
{/* <Option value="业务应用">业务应用</Option>
<Option value="处理平台">处理平台</Option> */}
</Select>,
address: ‘西湖区湖底公园1号‘,
},
{
key: ‘5‘,
name: ‘数量‘,
// age: "***",
age: <Input onChange = {this.virtualMachineNumber.bind(this) }></Input>,
// age: <Button onClick = {this.detailConfig.bind(this)}>详细配置</Button>,
address: ‘西湖区湖底公园1号‘,
},
];

React 下拉框

标签：sde   col   image   number   reac   conf   net   lists   state   

原文地址：https://www.cnblogs.com/zhanglanzuopin/p/12703532.html