Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 1x 1x 1x | import React, { useState } from "react"; import { RegionSelect, RegionPanel, RegionOption, } from "@tencent/tea-component/lib/regionselect"; export default function RegionSelectExample() { const [region, setRegion] = useState("gz"); const { Head, Column, Group } = RegionPanel; return ( <RegionSelect value={region} onChange={value => setRegion(value)} moreInfo={region === "all" ? null : "其它地域云主机 (120)"} > <RegionPanel> <Head> <RegionOption value="all">全部地域 (1108)</RegionOption> </Head> <Column> <Group name="中国"> <RegionOption value="gz">广州 (20)</RegionOption> <RegionOption value="sh" dot> 上海 (20) </RegionOption> <RegionOption value="hk">香港 (20)</RegionOption> </Group> <Group name="游戏专区"> <RegionOption value="bj">北京 (20)</RegionOption> </Group> </Column> <Column> <Group name="亚洲"> <RegionOption value="ia">印度 (20)</RegionOption> <RegionOption value="ko">韩国 (20)</RegionOption> <RegionOption value="ta">泰国 (20)</RegionOption> <RegionOption value="sg">新加坡 (20)</RegionOption> <RegionOption value="jp">日本 (20)</RegionOption> </Group> </Column> <Column> <Group name="北美洲"> <RegionOption value="gg">硅谷 (20)</RegionOption> <RegionOption value="dld">多伦多 (20)</RegionOption> </Group> </Column> <Column> <Group name="欧洲"> <RegionOption value="fl">法兰克福 (20)</RegionOption> <RegionOption value="mo">莫斯科 (20)</RegionOption> </Group> </Column> </RegionPanel> </RegionSelect> ); } |