Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

useState を使った input で初期値をセットしたりバリデーションチェックする方法

とある案件で Next.js を用いて web アプリケーションを開発しているのですが、その中で styled-components というライブラリを利用してコンポーネントを作成しています。

まぁコード見たら物凄い基本的なことですが、備忘録として書き残しておきます。

とりあえずデモ

今回は styled-components を用いて入力欄(input 要素)を作成しており、CodeSandbox の リンク も貼っておきます。

実際のコード

まず styled-components を使って作った入力用のコンポーネントソースコードを紹介します。

import React from "react";
import styled from "styled-components";

const Input = styled.input.attrs({ type: "text" })`
  border-color: ${props => (props.error ? "#ff0000" : "skyblue")};
  width: 200px;
  border-radius: 8px;
  padding: 5px;
  line-height: 1.5;
  font-size: 1rem;
`;

const TextField = ({ error, value, placeholder, onChange }) => (
  <Input
    value={value}
    placeholder={placeholder}
    onChange={e => onChange && onChange(e.target.value)}
    error={error}
  />
);

export default TextField;

なんの変哲もないコンポーネントかと思います。props で渡された onChange メソッドを、存在チェックした後に実行しているくらいです。value も同様に props で渡されたものをそのままセットしています。

次に、上記コンポーネントを利用する方のコードです。一部のみを抜粋します。

  // props で text という引数が与えられているものとする
  const [inputText, setInputText] = useState(text)  // ここで初期値をセット

  const checkAndSetText = text => {
    if (text.length > 10) return

    setInputText(text)
  }

  return (
    <>
      <TextField
        value={inputText}
        placeholder="input any words"
        onChange={checkAndSetText}
        error={false}  // 実際は動的に変化することを想定
      />
      <p>input text: {inputText}</p>
    </>
  )

今回は React Hooks の useState を使っています。入力のたびに checkAndSetText というメソッドをコールし、その中で文字数チェックをしています。実際のアプリケーションではここで様々な処理が入ると思います。(インクリメンタルサーチなどで API コールをしたり、Store に値を保存したりなど)

今回は文字数チェックをしており、10文字以内であれば setInputText というセッター用のメソッドを用いて変更しつつ、入力された値を inputText という変数(というか state)で保持しています。

useState 使うとこんな簡単に動的に値をセットできるのかーと感動したので、ちょっとメモ的に書き残したかった次第。

ではでは(=゚ω゚)ノ