时间戳

首页 > 解决方案 > React Js 中的月份选择器问题

javascript - React Js 中的月份选择器问题

问题描述

我正在尝试使用库react-month-picker制作月份选择器

反应中的工作代码：https ://codesandbox.io/s/react-month-picker-forked-84rqr

而且我已将相同的代码复制到Next Js 项目（React SSR） 中https://codesandbox.io/s/nice-bartik-o5miw但它会引发错误，

月份选择器中属性“值”的无效值

index.js：（代码仅与月份选择器相关）

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactMonthPicker from "react-month-picker";
import "react-month-picker/css/month-picker.css";

const MonthPicker = ({ range }) => {
  const [isVisible, setVisibility] = useState(false);
  const [monthYear, setMonthYear] = useState({});

  const showMonthPicker = event => {
    setVisibility(true);
    event.preventDefault();
  };

  const handleOnDismiss = () => {
    setVisibility(false);
  };

  const handleOnChange = (year, month) => {
    setMonthYear({ year, month });
    setVisibility(false);
  };

  const getMonthValue = () => {
    const month = monthYear && monthYear.month ? monthYear.month : 0;
    const year = monthYear && monthYear.year ? monthYear.year : 0;

    return month && year ? `${month}-${year}` : "Select Month";
  };

  return (
    <div className="MonthYearPicker">
      <button onClick={showMonthPicker}>{getMonthValue()}</button>

      <ReactMonthPicker
        show={isVisible}
        lang={[
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ]}
        years={range}
        value={monthYear}
        onChange={handleOnChange}
        onDismiss={handleOnDismiss}
      />
    </div>
  );
};

function App() {
  const range = {
    min: { year: 2020, month: 3 },
    max: { year: 2025, month: 2 }
  };

  return (
    <div className="App">
      <MonthPicker range={range} />
    </div>
  );
}

似乎是一个简单的问题，但我无法弄清楚我哪里出错了。

问题是它在 react codesandbox中有效，但在 Next JS codesandbox中无效。

你能帮我从选择器中选择月份和年份吗？

标签： javascriptreactjsdatenpmnext.js

解决方案

const [monthYear, setMonthYear] = useState({month: '', year: 0});

推荐阅读