[Next.js] Next.jsで番号入力フォームを作成する方法

はじめに

Next.jsではreact-native-screen-keyboardというパッケージが使えない為、自分で番号入力フォームを作成してみました！(※React Native向けのパッケージであり、Next.jsはReactベースである為)
今回は、数字のキーパッドを持ち、Backspaceボタンで数字を削除できるシンプルな番号入力フォームを紹介します！

1.NumberInputコンポーネントの作成

まず、NumberInputコンポーネントを作成します。
このコンポーネントは、数字の入力フィールドとキーボードを含んでいます。
CSSでスタイリングしています！

// components/NumberInput.js
import React, { useState } from "react";
import styles from "../styles/NumberInput.module.css";

const NumberInput = () => {
  const [number, setNumber] = useState("");

  const handleKeyClick = (key) => {
    setNumber((prevNumber) => prevNumber + key);
  };

  const handleBackspace = () => {
    setNumber((prevNumber) => prevNumber.slice(0, prevNumber.length - 1));
  };

  return (
    <div className={styles.NumberInput}>
      <input
        type="tel"
        value={number}
        placeholder="Enter number"
        readOnly
        className={styles.inputField}
      />
      <div className={styles.keyboard}>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num, index) => (
          <button
            key={num}
            onClick={() => handleKeyClick(String(num))}
            className={styles.button}
          >
            {num}
          </button>
        ))}
        <button className={`${styles.button} ${styles.emptyButton}`} disabled></button>
        <button
          key={0}
          onClick={() => handleKeyClick(String(0))}
          className={styles.button}
        >
          0
        </button>
        <button onClick={handleBackspace} className={styles.button}>
          Backspace
        </button>
      </div>
    </div>
  );
};

export default NumberInput;

/* styles/NumberInput.module.css */
.NumberInput {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.inputField {
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.emptyButton {
  visibility: hidden;
}

.button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fff;
}

2.フォームをページに組み込む

次に、作成したNumberInputコンポーネントをページに組み込みます！

// pages/index.js
import React from 'react';
import NumberInput from '../components/NumberInput';

const HomePage = () => {
  return (
    <div>
      <h1>番号を入力する</h1>
      <NumberInput />
    </div>
  );
};

export default HomePage;

まとめ

今回は、Next.jsを利用して簡単な番号入力フォームを作成しました！
この記事を参考に、番号入力フォームを作成してみてください！