material-ui 问题select Field Date Picker点击未响应 处理方法

最新推荐文章于 2024-06-20 09:49:15 发布
最新推荐文章于 2024-06-20 09:49:15 发布
阅读量2.3k 收藏
点赞数
分类专栏： Material-U 文章标签： DatePicker select material-U
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/four_lemmo/article/details/77773089
版权

material-ui 中select Field 和 DatePicker 在本地或者测试环境点击未响应

1.可以将下面的代码放到app.js 中确保在react 渲染前解决代入

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

2.如果上述方法还是无法解决问题。你可以升级react 和 material-ui 框架库  来寻找更加合适的组合来解决这个问题

react@15.3.2 和 material-ui@0.19.0 这个来解决 或者来寻找更符合要求的项目组合

点击未响应原因：

material-ui 设计的原则是监听 touchtap 事件。最终导致的React 事件捕获不到点击事件

问题地址：https://github.com/facebook/react/issues/436#issuecomment-207624448

four_lemmo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
material-ui组件的DatePicker禁止选择过去时间
xianyinsuifeng的博客
10-20 465
material-ui组件的DatePicker禁止选择过去时间
material-ui-pickers:日期和时间选择器，使用:red_heart:为@ material-uicore构建
05-03
材质用户界面选择器 可访问，可自定义，令人愉悦的日期和时间选择器 不再支持该项目 有关更多详细信息，请参见 安装 请注意，此软件包需要@material-ui/core v4 。 它不适用于旧的v3。 如果要从v2更新，请阅读 // via npm npm i @material-ui/pickers // via yarn yarn add @material-ui/pickers 入门 这是有关如何开始使用@material-ui/pickers 。 文献资料 查看文档网站 最近更新了吗？ 更改日志在这里可用 贡献 有关如何捐款的信息，请参见CONTRIBUTING文件。 执照 该项目是根据MIT许可条款获得许可的
探索时间选择的新境界：Material-UI-Time-Picker
最新发布
gitblog_00082的博客
06-20 348
探索时间选择的新境界：Material-UI-Time-Picker 项目地址:https://gitcode.com/TeamWertarbyte/material-ui-time-picker 在追求界面优雅与用户体验至上的今天，选择一个合适的组件对于前端开发者至关重要。今天，让我们一同深入探索【Material-UI-Time-Picker】——一款专为Material-UI设计的时间选择器...
material select手动选择
MrLi的博客
05-24 1130
前端框架 materialize 目标 可以手动根据option 设置选中 方法 // item 目标select $(item).find('option[value='+YourOptinoValue+']').prop('selected', true); $(item).material_select(); 原理 关注 material_select 方法-原手册中有如下说明 浏览源码发现,此处activateOption 函数实现了根据selected的option 添加页面selected效
UIImagePickerController崩溃的问题
u014607644的专栏
11-22 1826
今天在使用UIImagePickerController拍照换头像的时候， Snapshotting a view that has not been rendered results in an empty snapshot. Ensure your view has been rendered at least once before snapshotting or snapshot aft
react-daterange-picker:使用@ material-ui的React日期范围选择器。 现场演示
05-06
React日期范围选择器 ...import { DateRangePicker , DateRange } from "@matharumanpreet00/react-daterange-picker" ; type Props = { } type State = { open : boolean , dateRange : DateRange } class App ex
material-ui-color-picker:材质用户界面的组件
04-28
用于Material-UI 基于 和<ChromePicker> ColorPicker及其字段组件。 演示版 安装 对于材料用户界面（v1）： npm install --save material-ui-color-picker 用法 import React from 'react' import ColorPicker ...
material-vue-daterange-picker：日期范围选择器遵循由vue.js（alpha）支持的Material Design规范
02-03
npm install v-md-date-range-picker --save # or use yarn yarn add v-md-date-range-picker 快速开始 您可以使用vue-cli创建项目 1. npm install -g @vue/cli # or yarn global add @vue/cli 2. vue create hello-...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
热门推荐
路虽远行则将至，事虽难做则必成。
06-19 2万+
最近在使用uni-app写H5移动端，有一个从手机拍摄从相册选择获取图片上传到文档服务器功能。查阅uni-app发现关于上传图片，uni-file-picker文件上传，uni.chooseImage，uni.uni.uploadFile它和pc端原理差不多，都是file对象上传，PC端是通过new file对象，uni-app是直接提供了。
FilePicker 是一个小巧快速的文件选择器框架，以快速集成、高自定义化和可配置化为目标不断前进~.zip
10-11
FilePicker 是一个小巧快速的文件选择器框架，以快速集成、高自定义化和可配置化为目标不断前进~.zip,FilePicker is a small and fast file selector framework that is constantly evolving with the goal of rapid integration, high customization and configurability~
datetimepicker用于移动Web的轻量级Material日期时间选择器
08-10
date-time-picker：用于移动Web的轻量级Material日期/时间选择器
Material UI -Date Picker 汉化
four_lemmo的博客
11-22 2537
Material UI -Date Picker 汉化根据产品的需求来对Date Picker日期选择器进行优化 废话不说,先来段代码import React from 'react' import DatePicker from 'material-ui/DatePicker'function dateTimeFormat(locale, options) { const dayAbbr
Android-FilePicker 选择照片
未来很长，但我会努力的走下去。
11-07 4348
Android-FilePicker 选择照片
ie11下点击WdatePicker无反应，控制台报SCRIPT70: 没有权限
幼儿园大班扛把子
01-28 1285
解决办法：   打开WdatePicker.js 设置$crossFrame:false
weui实现多张图片上传,单个预览并删除
weixin_39682289的博客
10-12 7840
订单详情 header a.information { background: url(./images/information.png) no-repeat center center / 2em auto; right: 0; } 图片上传
element-ui el-date-picker 如何设置 daterange 的日期格式
07-12
对于 element-ui 的 el-date-picker 组件来说，要设置 daterange 的日期格式，可以通过设置 picker-options 属性来实现。具体步骤如下： 1. 在 el-date-picker 组件上添加 picker-options 属性，值为一个对象。 ```html <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions" ></el-date-picker> ``` 2. 在组件的 data 中定义 pickerOptions 对象，设置其属性 disabledDate 和 shortcuts。 ```javascript data() { return { dateRange: [], // 存储选择的日期范围 pickerOptions: { disabledDate(time) { // 自定义禁用日期的逻辑，可根据需求进行修改 return time.getTime() > Date.now(); }, shortcuts: [ { text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } } ] } }; } ``` 在以上代码中，disabledDate 函数用于自定义禁用日期的逻辑，可以根据需求进行修改。shortcuts 属性用于设置快捷选项，通过 onClick 函数设置快捷选项的点击事件逻辑。 通过以上步骤，即可设置 el-date-picker 组件的 daterange 的日期格式以及其他相关配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值