这readOnly是防止浏览器显示键盘和在移动设备上打字的好选择。使用该readonly集合，您仍然可以在其上启动单击事件。

在谈论react-date-pickermodule时，这在非移动设备中也很有用。

可以添加 option readOnly={true}，但它将完全禁用所有设备上的日期选择器输入，正如我们在以下问题中所见：

• Datepicker 不打开 readOnly=true #1443
• 禁用或只读输入字段 #961

此外，您将需要处理该onClick事件，我认为这不是一个好主意。

当前的解决方法

目前，在移动设备上禁用键盘并readOnly为所有 datePickers 输入设置的解决方案将编辑组件componentDidMount事件的输入属性：

 componentDidMount() {
    const datePickers = document.getElementsByClassName("react-datepicker__input-container");
    Array.from(datePickers).forEach((el => el.childNodes[0].setAttribute("readOnly", true)))
};

使用 React 钩子的工作解决方案

const pickerRef = useRef(null)

useEffect(() => {
    if (isMobile && pickerRef.current !== null) {
      pickerRef.current.input.readOnly = true;
    }
}, [isMobile, pickerRef]);

return (<DatePicker ref={pickerRef} ... />)

所以我最终修改了 componentDidMount 生命周期中的 input-element，就像这样；

document.getElementsByTagName("input")[0].setAttribute("readonly", "readonly");

这会阻止显示我手机上的本机可视键盘。然而，当悬停输入字段时，它会在桌面上创建这个“不允许”的红色丑陋光标，所以我通过定位我的日期选择器输入来修复它。

.react-datepicker-wrapper input[readonly]{cursor: pointer;}

不过，我欢迎替代解决方案。

Caroline Waddell 的答案的一个变体让我在 react-datepicker 上畅通无阻2.8.0。日期选择器元素的id是date-picker-input这样通过id获取后修改属性的：

componentDidMount() {
    document.getElementById('date-picker-input').setAttribute('readonly', 'readonly');
  }

如果您input在页面上有多个，就对我有用。