在移动设备上禁用react-datepicker的键盘

Question

我使用的是react-datepicker npm插件，我试图禁止我的手机键盘在我点击时显示，因为我的手机键盘占据了整个屏幕，所以很难在移动设备上与datepicker交互

这是我的代码：

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;

Answer 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
  />