html弹窗中加载列表,【已解决】ReactJS中如何弹出列表选择框

希望实现，点击处理按钮弹出选择框：

reactjs 弹出框 选择

react js popup modal select

后来，别人弄出来了CSS+HTML

然后自己去整合后，相关代码是：

index.js：

取消

请选择处理状态

完成

• 确认发情
• 未发情

和style.less：.cd_popup_02{

position: fixed;

left: 0;

top: 0;

z-index: 181;

height: 100%;

width: 100%;

background-color: rgba(94, 110, 141, 0.8);

opacity: 0;

// visibility: hidden;

visibility: visible;

-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;

-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;

transition: opacity 0.3s 0s, visibility 0s 0.3s;

}

.cd_popup_02

{

opacity: 1;

visibility: visible;

-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;

-moz-transition: opacity 0.3s 0s, visibility 0s 0s;

transition: opacity 0.3s 0s, visibility 0s 0s;

}

.cd_popup_containerb {

width: 7.5rem;

height: 100%;

position: relative;

margin: 0 auto;

margin-bottom: 0rem;

border-radius: 0;

text-align: center;

/* Force Hardware Acceleration in WebKit */

-webkit-backface-visibility: hidden;

-webkit-transition-property: -webkit-transform;

-moz-transition-property: -moz-transform;

transition-property: transform;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

transition-duration: 0.3s;

}

能看到界面：

但是有个严重的问题：

对应的两个选择项，是没法上下滚动，没法选择高亮(为黑色)的。

所以最后放弃，自己去尝试使用别的 modal窗口，或者是

参考：

-》

去看看别人是如何实现弹出框，尤其是像选择日期中的年月日一样上下滚动去选择的。

reactjs modal select list

reactjs modal scroll select

reactjs modal scroll list

reactjs scroll list

reactjs scroll to select

reactjs 滚动选项列表

-》知道这个东西叫叫做 Picker

就是我要的这种

reactjs picker➜  ucowsapp git:(master) ✗ npm install rmc-picker

npm WARN echarts-for-react@1.4.4 requires a peer of react@>=0.13.2 || ^0.14 || ^15.0.0 || >=16.0.0-alpha.1 <17.0.0 but none was installed.

npm WARN react-datepicker@0.48.0 requires a peer of react@^0.14.0 || ^15.0.0 but none was installed.

npm WARN react-datepicker@0.48.0 requires a peer of react-dom@^0.14.0 || ^15.0.0 but none was installed.

npm WARN react-datetime@2.8.10 requires a peer of react@>=0.13 but none was installed.

npm WARN react-datetime@2.8.10 requires a peer of react-dom@>=0.13 but none was installed.

npm WARN react-day-picker@6.0.4 requires a peer of react@~0.13.x || ~0.14.x || ^15.0.0 but none was installed.

npm WARN react-event-listener@0.4.5 requires a peer of react@^0.14.0 || ^15.0.0 but none was installed.

npm WARN react-onclickoutside@6.1.1 requires a peer of react@^15.5.x but none was installed.

npm WARN react-onclickoutside@6.1.1 requires a peer of react-dom@^15.5.x but none was installed.

npm WARN react-swipeable-views@0.12.3 requires a peer of react@^15.0.0 || ^0.14.0 but none was installed.

npm WARN preact-boilerplate@6.0.0 No repository field.

npm WARN preact-boilerplate@6.0.0 No license field.

added 17 packages in 15.282s

结果去参考实例：

写代码，结果无法运行：

再去试试：

结果也是乱七八糟的demo代码，无法简单合并：

再去试试：

结果下载下来，连运行demo都没法运行：

再去看看：

安装后， 但是无法webpack无法加载：

然后才发现，不是我要的，只是普通的下来列表：

react js picker

react js picker selector

react js 选择器

reactjs 选择器

reactjs 滑动选择器

然后没解决。最后自己去：

而搞定问题了。