javascript - react-date-picker の使用時にモバイルでネイティブ キーボードを非表示にする

Question

私はreact-date-pickerを使用していますが、モバイルではクリックするとネイティブキーボードが表示され、日付ピッカーが一番上に開くため、見栄えがよくありません。オンラインの解決策は、日付ピッカーがバインドされている入力フィールドに readonly 属性を設定することです。しかし、read-date-picker コンポーネントでは、その props を渡すことができません...

これに対する良い解決策はありますか？

Answer 1

React フックを使用した実用的なソリューション

const pickerRef = useRef(null)

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

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

Answer 2

Reactdatepickerには className がありreact-datepicker__input-containerます。そう

const datePickers = document.getElementsByClassName(
      "react-datepicker__input-container"
    );

HTML collectionこれは、配列に変換する必要がある を返します。を使用できますArray.fromが、これは IE 11 ではサポートされていません。したがって、 native を使用することをお勧めしますfor loop。そう

for (let i = 0; i < datePickers.length; i++) {
      datePickers[i].childNodes[0].setAttribute("readonly", true);
    }