折腾:
【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期
期间,
通过input的readonly会导致日期选择器无法滑动选择日期
所以只能想办法去:
禁止input的获取focus
去防止出现键盘,不允许输入
react js input prevent focus
react js prevent input get focus
这个是jquery的,不是普通的的html和js
但是需要抽空去搞懂blur是啥,能起到什么效果
javascript – React.js – input losing focus when rerendering – Stack Overflow
注:
此处input已经是不允许选择了:
//disable text selection -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; |
Inputs lose focus on parent re-render · Issue #51 · gcanti/tcomb-form
How to put focus at the end of an input with React.js (Example)
javascript – Prevent click-Event on input field – Stack Overflow
之前已经试过了:
constructor(props) { this.handleDateClick = this.handleDateClick.bind(this); } handleDateClick(e) { e.preventDefault(); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } <input value={datetimeToStr(this.state.curDate, "请选择")} onClick={this.handleDateClick} |
e.preventDefault();
没效果。
javascript – AutoFocus an input element in react JS – Stack Overflow
react js prevent input focus
react js prevent input preventDefault not work
reactjs – React onClick and preventDefault() link refresh/redirect? – Stack Overflow
试试在:
handleDateClick
最后返回false试试
javascript – event prevent default in ReactJS when passing events to parent – Stack Overflow
No way to prevent default browser input validation · Issue #89 · christianalfoni/formsy-react
React & event.preventDefault() – Eric Clemmons – Medium
【总结】
最后还是之前的代码:
handleDateClick(e) { e.preventDefault(); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); 。。。 return false; } return ( <input value={datetimeToStr(this.state.curDate, "请选择")} onClick={this.handleDateClick} class={style.ui_input}> <DatePicker value={this.state.curDate} isOpen={this.state.isOpen} ignoreReadonly={true} theme={‘ios’} min={new Date(2010, 1, 1)} max={new Date(2050, 1, 1)} dateFormat={[‘YYYY年’, ‘MM月’, ‘DD日’]} onSelect={this.handleDateSelect} onCancel={this.handleDateCancel} /> </input> |
但是虽然解决了键盘输入的问题,但是滑动选择日期还是不能用了。。。