为 react-datepicker 禁用移动设备上的键盘答案

【问题标题】：Disable keyboard on mobile device for react-datepicker为 react-datepicker 禁用移动设备上的键盘
【发布时间】：2021-05-06 14:53:46
【问题描述】：

所以我使用react-datepicker npm 插件，我试图禁用我的手机键盘，当我点击它时不显示，因为我的手机键盘占据了整个屏幕，所以很难在手机上与日期选择器交互

这是我的代码：

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import Label from './Label';
import PropTypes from 'prop-types';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';


const Example = (props) => {
  const [startDate, setStartDate] = useState(null);
  
  return (
    <div className="customDatePickerWidth">
      <Label className={props.className} text={props.label}></Label>
      <DatePicker 
       
        className={""+props.class} selected={startDate} 
        onChange={date => setStartDate(date)} 
        disabledKeyboardNavigation
        placeholderText="dd/mm/yyyy"

        />
    </div>
  );
};
export default Example;

【问题讨论】：

disabledKeyboardNavigation 只是意味着您不能在日历视图上左右箭头来选择一天，这并不意味着“完全禁用键盘”。我没有看到控件原生的选项来执行此操作。您可能不得不挂钩到控件的文本框事件。

标签： reactjs react-datepicker

【解决方案1】：

我今天遇到了同样的问题，并在 react-datepicker 中发现了一个未解决的问题，似乎有一些解决方法。 This one 最终为我工作：

  <DatePicker 
    className={""+props.class} selected={startDate} 
    onChange={date => setStartDate(date)} 
    disabledKeyboardNavigation
    placeholderText="dd/mm/yyyy"
    onFocus={e => e.target.blur()} // <--- Adding this
  />

【讨论】：

想指出，4 年后，这仍然有效。