React 下拉框

<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號',
},
];