用React hooks寫了一個(gè)日歷組件，來看看？

cangck_X 發(fā)布于2019-05-23 11:56 / 2812人閱讀

摘要：然后使用，在的上綁定了，很簡單。日歷遍歷的思路這一次的提交主要是確定了日歷組件，怎么寫，具體思路看下面的代碼，盡量通過注釋把思路講的清楚一些。

前言

在最近的項(xiàng)目中，大量的嘗試了react hooks，我們的組件庫用的是Next，除了一個(gè)地方因?yàn)橐褂肍orm + Field的組合，所以使用了class組件，經(jīng)過了這個(gè)項(xiàng)目，也算是總結(jié)一些使用的經(jīng)驗(yàn)，所以準(zhǔn)備自己封裝一個(gè)日歷組件來分享一下。以下也會通過git中的commit記錄，來分析我的思路。

下來看下效果（因?yàn)檐浖脑?，轉(zhuǎn)的gif竟然如此抖動(dòng)，順便求一個(gè)mac上轉(zhuǎn)換gif比較好用的軟件）

同時(shí)奉上代碼地址: 倉庫

初始化項(xiàng)目

只是使用了create-react-app進(jìn)行了項(xiàng)目的搭建，然后總體就是hooks + typescript，當(dāng)然寫的不夠好，就沒有往npm上發(fā)的意愿。

工具方法，保存狀態(tài)

首先是寫了一個(gè)工具方法，作用是將時(shí)間戳轉(zhuǎn)化成年月日三個(gè)屬性。

interface Res {
    year: number;
    month: number;
    day: number;
}

export const getYearMonthDay = (value: number):Res => {
    const date = new Date(value);
    return {
        year: date.getFullYear(),
        month: date.getMonth(),
        day: date.getDay()
    }    
}

然后使用useState，在input的dom上綁定了value，很簡單。

const Test:React.FC = memo(({value = Date.now(), onChange}) => {
  console.log("render -------");
  const [date, setDate] = useState<Date>(new Date(value));
  const { year, month, day } = getYearMonthDay(date.getTime());
  console.log(year, month, day);
  return (
    <div>
      <input type="text" value={`${year} - ${month} - ${day}`} />
    div>
  )
});

日歷遍歷的思路

這一次的提交主要是確定了日歷組件，怎么寫，具體思路看下面的代碼，盡量通過注釋把思路講的清楚一些。

// 以下兩個(gè)數(shù)組只是為了遍歷
const ary7 = new Array(7).fill("");
const ary6 = new Array(6).fill("");

const Test: React.FC = memo(({ value = Date.now(), onChange }) => {
  const [date, setDate] = useState<Date>(new Date(value));
  // useState保存下面彈窗收起/展開的狀態(tài)
  const [contentVisible, setContentVisible] = useState(true);
  const { year, month, day } = getYearMonthDay(date.getTime());
  // 獲取當(dāng)前選中月份的第一天
  const currentMonthFirstDay = new Date(year, month, 1);
  // 判斷出這一天是星期幾
  const dayOfCurrentMonthFirstDay = currentMonthFirstDay.getDay();
  // 然后當(dāng)前日歷的第一天就應(yīng)該是月份第一天向前移幾天
  const startDay = new Date(currentMonthFirstDay.getTime() - dayOfCurrentMonthFirstDay * 1000 * 60 * 60 * 24);
  const dates:Date[] = [];
  // 生成一個(gè)長度為42的數(shù)組，里面記錄了從第一天開始的每一個(gè)date對象
  for (let index = 0; index < 42; index++) {
    dates.push(new Date(startDay.getTime() + 1000 * 60 * 60 * 24 * index));
  }
  return (
    <div>
      <input type="text" value={`${year} - ${month} - ${day}`} />
      {
        contentVisible && (
          <div>
            <div>
              <span><span>
              <span>< <span>
              <span>span>
              <span>>span>
              <span>> >span>
            div>
            <div>
                // 生成的日歷應(yīng)該是7*6的，然后遍歷出42個(gè)span， 這就是之前生成的兩個(gè)常量數(shù)組的作用
              {
                ary6.map((_, index) => {
                  return (
                    <div>
                      {
                        ary7.map((__, idx) => {
                          const num = index * 7 + idx;
                          console.log(num);
                          
                          const curDate = dates[num]
                          return (
                            <span>{curDate.getDate()}span>
                          )
                        })
                      }
                    div>
                  )
                })
              }
            div>
          div>
        )
      }
    div>
  )
});

處理document點(diǎn)擊事件

const Test: React.FC = memo(({ value = Date.now(), onChange }) => {
  // 使用useRef保存最外一層包裹的div
  const wrapper = useRef(null);
  // 展開收起的方法，都使用了useCallback，傳入空數(shù)組，讓每次渲染都返回相同的函數(shù)
  const openContent = useCallback(
    () => setContentVisible(true),
    []
  );
  const closeContent = useCallback(
    () => setContentVisible(false),
    []
  );
  const windowClickhandler = useCallback(
    (ev: MouseEvent) => {
      let target = ev.target as HTMLElement;
      if(wrapper.current && wrapper.current.contains(target)) {
      } else {
        closeContent();
      }
    },
    []
  )
  // 使用useEffect模擬componentDidMount和componentWillUnmount的生命周期函數(shù)，來綁定事件
  useEffect(
    () => {
      window.addEventListener("click",windowClickhandler);
      return () => {
        window.removeEventListener("click", windowClickhandler);
      }
    },
    []
  )
  return (
    <div ref={wrapper}>
      // 之前的那些東西，沒有變化
    div>
  )
});

處理每個(gè)日期的點(diǎn)擊事件

  // 使用setDate，處理，這里其實(shí)第二個(gè)參數(shù)傳遞一個(gè)空數(shù)組即可，因?yàn)檫@個(gè)函數(shù)是不依賴當(dāng)前的date狀態(tài)來變化的。
  const dateClickHandler = useCallback(
    (date:Date) => {
      setDate(date);
      const { year, month, day } = getYearMonthDay(date.getTime());
      onChange(`${year}-${month}-${day}`);
      setContentVisible(false);
    },
    [date]
  )

 dateClickHandler(curDate)}>{curDate.getDate()}

支持value傳遞

// 先判斷以下value是否傳遞，如果沒傳默認(rèn)就是當(dāng)前的時(shí)間
const DatePicker: React.FC = ({ value = "", onChange = () => { } }) => {
  let initialDate: Date;
  if (value) {
    let [year, month, day] = value.split("-");
    initialDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
  } else {
    initialDate = new Date();
  }
  const [date, setDate] = useState<Date>(initialDate);
 }

月份切換的事件處理

月份處理就是當(dāng)前月份的第一天向前移動(dòng)一個(gè)月或者一個(gè)月等等。

const DatePicker: React.FC = ({ value = "", onChange = () => { } }) => {
  // 之前這里的currentMonthFirstDay是直接由date得出的，現(xiàn)在成為組件的state就可以讓他支持變化。
  const { year, month, day } = getYearMonthDay(date.getTime());
  const [currentMonthFirstDay, setCurrentMonthFirstDay] = useState<Date>(new Date(year, month, 1));
  const { year: chosedYear, month: chosedMonth } = getYearMonthDay(currentMonthFirstDay.getTime());
  const dayOfCurrentMonthFirstDay = currentMonthFirstDay.getDay();
  const startDay = new Date(currentMonthFirstDay.getTime() - dayOfCurrentMonthFirstDay * 1000 * 60 * 60 * 24);
  const dates: Date[] = [];
  for (let index = 0; index < 42; index++) {
    dates.push(new Date(startDay.getTime() + 1000 * 60 * 60 * 24 * index));
  }

  const openContent = useCallback(
    () => setContentVisible(true),
    []
  );
  const closeContent = useCallback(
    () => setContentVisible(false),
    []
  );
  const windowClickhandler = useCallback(
    (ev: MouseEvent) => {
      let target = ev.target as HTMLElement;
      if (wrapper.current && wrapper.current.contains(target)) {
      } else {
        closeContent();
      }
    },
    []
  );
  const dateClickHandler = useCallback(
    (date: Date) => {
      const { year, month, day } = getYearMonthDay(date.getTime());
      onChange(`${year}-${month + 1}-${day}`);
      setContentVisible(false);
    },
    [date]
  );
  // 這里所有的月份切換事件都選擇了使用了函數(shù)式更新
  const prevMonthHandler = useCallback(
    () => {
      setCurrentMonthFirstDay(value => {
        let { year, month } = getYearMonthDay(value.getTime());
        if (month === 0) {
          month = 11;
          year--;
        } else {
          month--;
        }
        return new Date(year, month, 1)
      })
    },
    []
  );
  const nextMonthHandler = useCallback(
    () => {
      setCurrentMonthFirstDay(value => {
        let { year, month } = getYearMonthDay(value.getTime());
        if (month === 11) {
          month = 0;
          year++;
        } else {
          month++;
        };
        return new Date(year, month, 1);
      })
    },
    []
  );
  const prevYearhandler = useCallback(
    () => {
      setCurrentMonthFirstDay(value => {
        let { year, month } = getYearMonthDay(value.getTime());
        return new Date(--year, month, 1)
      })
    },
    []
  );
  const nextYearHandler = useCallback(
    () => {
      setCurrentMonthFirstDay(value => {
        let { year, month } = getYearMonthDay(value.getTime());
        return new Date(++year, month, 1)
      })
    },
    []
  )
  return (
    <div ref={wrapper}>
      <input type="text" value={`${year} - ${month + 1} - ${day}`} onFocus={openContent} />
      {
        contentVisible && (
          <div className="content">
            <div className="header">
              <span onClick={prevYearhandler}>< <span>
              <span onClick={prevMonthHandler}><span>
              <span>{`${chosedYear} - ${chosedMonth + 1}`}span>
              <span onClick={nextMonthHandler}>>span>
              <span onClick={nextYearHandler}>> >span>
            div>
          div>
        )
      }
    div>
  )
};

處理porps變化

工具方法

export const getDateFromString = (str: string):Date => {
    let [year, month, day] = str.split("-");
    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
}

組件

const DatePicker: React.FC = ({ value = "", onChange = () => { } }) => {
  let initialDate: Date;
  if (value) {
    initialDate = getDateFromString(value);
  } else {
    initialDate = new Date();
  };
  
  const [date, setDate] = useState<Date>(initialDate);
  
  // 使用了useRef來保存上一次渲染時(shí)傳遞的value值，
  const prevValue = useRef(value);

  useEffect(
    () => {
      // 僅當(dāng)value值變化且不同與上一次值時(shí)，才會重新進(jìn)行改變自身date狀態(tài)。
      if (prevValue.current !== value) {
        let newDate = value ");new Date();
        setDate(newDate);
        const { year, month } = getYearMonthDay(newDate.getTime());
        setCurrentMonthFirstDay(new Date(year, month, 1))
      }
    },
    [value]
  )

  return (
    ...
  )
};

這里現(xiàn)在想來其實(shí)也可以用useMemo來處理傳遞進(jìn)來的value值，這也是一種思路。稍后實(shí)現(xiàn)一下。

最后

最后貼下代碼github地址。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6921.html

發(fā)表評論

登陸后可評論

0條評論

cangck_X

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2002·2023-04-26 01:41
如何使用powerdesigner管理設(shè)計(jì)數(shù)據(jù)庫

閱讀 2500·2021-11-24 09:39
科華UPS 怎樣選擇UPS電源？

閱讀 1940·2021-11-24 09:38
Rasa2.x機(jī)器人實(shí)現(xiàn)《買瓜》完整代碼

閱讀 1968·2021-11-19 09:40
#11.11#UCloud狂歡盛典：1核AMD/1G套餐年付37元，COM域名20元首年，多國機(jī)房

閱讀 3789·2021-11-11 11:02
LOCVPS雙十一全場7折/部分5折,充300元送50元

閱讀 3311·2021-10-20 13:48
華為官方首發(fā)Spring響應(yīng)式微服務(wù)，Spring+Boot+Cloud三管齊下

閱讀 3205·2021-10-14 09:43
HAPI使用方法總結(jié)（HITRAN數(shù)據(jù)庫，HITEMP數(shù)據(jù)庫）

閱讀 4433·2021-09-02 15:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用React hooks寫了一個(gè)日歷組件，來看看？

相關(guān)文章

30分鐘精通React今年最勁爆的新特性——React Hooks

[譯]開發(fā)類 redux 庫來理解狀態(tài)管理

RN自定義組件封裝 - 拖拽選擇日期的日歷

React Hooks+Umi+TypeScript+Dva開發(fā)體驗(yàn)

從React函數(shù)式組件說到Hooks

發(fā)表評論

0條評論

cangck_X

男|高級講師

TA的文章

tensorflow

如何使用powerdesigner管理設(shè)計(jì)數(shù)據(jù)庫

科華UPS 怎樣選擇UPS電源？

Rasa2.x機(jī)器人實(shí)現(xiàn)《買瓜》完整代碼

#11.11#UCloud狂歡盛典：1核AMD/1G套餐年付37元，COM域名20元首年，多國機(jī)房

LOCVPS雙十一全場7折/部分5折,充300元送50元

華為官方首發(fā)Spring響應(yīng)式微服務(wù)，Spring+Boot+Cloud三管齊下

HAPI使用方法總結(jié)（HITRAN數(shù)據(jù)庫，HITEMP數(shù)據(jù)庫）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用React hooks寫了一個(gè)日歷組件，來看看？

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用React hooks寫了一個(gè)日歷組件，來看看？