Chào mọi người. Đây là bài viết đầu tiên mình viết về Reactjs. Ở bài này mình sẽ hướng dẫn cách tạo select box để chọn ngày tháng với Reactjs thông qua list-key và state (dùng functional component) một cách chi tiết và dễ hiểu nhất. Có thể có nhiều cách ngắn và rút gọn hơn, nhưng cá nhân mình nghĩ dễ hiểu vẫn nên được ưu tiên trước. Nếu bạn đọc có cách ngắn gọn hơn thì hãy chia sẽ dưới comment nha ^^

Các bước tóm tắt

  1. Tạo project reactjs mới.
  2. Tạo select box ngày tháng.
  3. Chỉnh sửa css.

1. Tạo project reactjs mới.

Đơn giản với 3 dòng lệnh sau:

npx create-react-app <tên_của_app>
cd <tên_của_app>
npm start

Giao diện trang web sau khi vừa khởi tạo mặc định như hình:

React JavaScript Tutorial in Visual Studio Code

Chúng ta cùng đến bước tiếp theo nào.

2. Tạo select box ngày tháng.

Bước 1: Triển khai khung functional component tại App.js
import React from 'react';
import './App.css'

export default function App() {

  return (
    <div className="App">
      
    </div>
  );
};
Bước 2: Khai báo state dùng để hiển thị ngày tháng đã chọn
const [selectedMon, setMon] = React.useState(1)
const [selectedDay, setDay] = React.useState(1)

Trong đó selectedMon tương ứng với tháng đã chọn và selectedDay tương ứng với ngày đã chọn. Ở đây mình để mặc định là ngày 1 tháng 1.

Bước 3: Render component
return (
    <div className="App">
      <div>Chọn tháng:
          <select onChange={handleChangeMon}>
          {[...Array(12)].map((_, index) => (
            <option key={index + 1} value={index + 1}>{index + 1}</option>
          ))}
        </select>
      </div>
      <div>Chọn ngày:
        <select onChange={handleChangeDay}>
          {[...Array(new Date(2021, selectedMon, 0).getDate())].map((_, index) => (
          <option key={index + 1} value={index + 1}>{index + 1}</option>
          ))}
        </select>
      </div>

      <div>Ngày {selectedDay} tháng {selectedMon}</div>
    </div>
  );

Ở select box thứ nhất, mình tạo một mảng mới chứa 12 phần tử, sau đó duyệt và trả về 12 tháng tương ứng. Ở select box còn lại, mình tạo một mảng chứa số phần tử bằng số ngày của tháng đã chọn thông qua:

new Date(2021, selectedMon, 0).getDate()

Vì bài viết này được viết vào năm 2021 nên mình đặt năm là 2021, các bạn có thể update thêm cho select box chọn năm và thay 2021 bằng selectedYear chẳng hạn.

Bước 4: Thiết lập hàm
const handleChangeMon = (e) => {
    setMon(e.target.value)
  }
  const handleChangeDay = (e) => {
    setDay(e.target.value)
  }

Với mỗi sự thay đổi xảy ra ở select box, giá trị mới được chọn sẽ cập nhật lên state để hiển thị ra ngoài màn hình.

Đầy đủ App.js
import React from 'react';

export default function App() {

  const [selectedMon, setMon] = React.useState(1)
  const [selectedDay, setDay] = React.useState(1)

  const handleChangeMon = (e) => {
    setMon(e.target.value)
  }
  const handleChangeDay = (e) => {
    setDay(e.target.value)
  }

  return (
    <div className="App">
      <div>Chọn tháng:
          <select onChange={handleChangeMon}>
          {[...Array(12)].map((_, index) => (
            <option key={index + 1} value={index + 1}>{index + 1}</option>
          ))}
        </select>
      </div>
      <div>Chọn ngày:
        <select onChange={handleChangeDay}>
          {[...Array(new Date(2021, selectedMon, 0).getDate())].map((_, index) => (
          <option key={index + 1} value={index + 1}>{index + 1}</option>
          ))}
        </select>
      </div>

      <div>Ngày {selectedDay} tháng {selectedMon}</div>
    </div>
  );
};

Hoặc bạn có thể làm như sau:

// by tronginc
import React from "react";

function useInputValue(initValue) {
  const [value, setValue] = React.useState(initValue);
  const onValueChange = (event) => {
    if (typeof event === "object" && event.hasOwnProperty("target")) {
      return setValue(event.target.value);
    }
    return setValue(event);
  };
  return [value, onValueChange];
}
export default function App() {
  const [selectedDay, onDayChange] = useInputValue(1);
  const [selectedMonthIndex, onMonthChange] = useInputValue(0);
  return (
    <div className="App">
      <select name="selectedMonthIndex" onChange={onMonthChange}>
        {[...Array(12)].map((_, index) => (
          <option key={index.toString()} value={index}>
            Tháng {index + 1}
          </option>
        ))}
      </select>
      <select name="selectedDay" onChange={onDayChange}>
        {[...Array(new Date(2021, +selectedMonthIndex + 1, 0).getDate())].map(
          (_, index) => (
            <option key={index.toString()} value={index + 1}>
              Ngày {index + 1}
            </option>
          )
        )}
      </select>
      <h1>
        Ngày {selectedDay} - Tháng {+selectedMonthIndex + 1}
      </h1>
    </div>
  );
}

3. Chỉnh css tùy theo mỗi người

Kết quả thu được như sau:

Select box ngày tháng với Reactjs.

Kết luận

Mong rằng qua bài viết, bạn có thể dễ dàng tạo select box để chọn ngày tháng. Chúc bạn đọc có một trải nghiệm thú vị với Hóng tin.