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
使うとこんな簡単に動的に値をセットできるのかーと感動したので、ちょっとメモ的に書き残したかった次第。
ではでは(=゚ω゚)ノ