こんにちは。フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、ここ最近はReactの面白さに触れてしまって、ずっとReact関連の記事が続いています。（初めてコロコロ掃除をしたとき止まらなくなった感覚に似てます👍）

ということで、他にも何かユーザビリティ関連でコンポーネントが作れないかなと考えていたところ、地味に便利なものを思い出しました。

それは・・・・・・

ワンクリックでクリアできる入力ボックス

です。例えばこんなカンジです。

つまり、通常の<input>では、文字を削除するときバックスペースで１文字ずつ消すか、全体を選択状態にして削除しないと全クリアにはなりません。

しかし、もしスピードを求められる現場での入力ボックスだったとしたら全クリアがあると便利ですよね。

そこで❗

今回は、Laravel + Reactで「ワンクリックでクリアできる入力ボックス」を作ってみます。

ぜひ何かの参考になりましたら嬉しいです。😄✨

「名曲イージュー★ライダーは、
もう旅猿バージョンでしか
脳内再生されません😇」

開発環境： Laravel 9.x、React、Vite、Inertia.js、TailwindCSS

1 Font Awesome をインストールする
2 ルートをつくる
3 ビューをつくる
4 コンポーネントをつくる
5 テストしてみる
6 デモページを用意しました
7 企業様へのご提案
8 おわりに

Font Awesome をインストールする

まず、今回はクリアボタンに以下のアイコンフォントを使いたいので、先にFont Awesomeをインストールしておきます。

以下のコマンドでパッケージをインストールしてください。

npm i font-awesome --save

そして、Viteがアクセスできるようにfont-awesomeを追加します。

resources/css/app.css

@import 'font-awesome/css/font-awesome.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

【ご注意❗】
どうやら@importは一番最初に書かなければいけないらしく、もし@tailwindの後に追加してしまうとエラーになってしまいます。
お気をつけください。m(_ _)m

ルートをつくる

では、続いてルートをつくります。
今回はひとつだけでOKです。

routes/web.php

use Inertia\Inertia;

// 省略

Route::get('clear_input', fn() => Inertia::render('ClearInput/Index'));

※ 本来はコントローラーをつくる方がいいと思いますが、テストなので省略形にしています。

ビューをつくる

次にブラウザから実際にアクセスされることになるビューになります。

なお、今回は次の項目でつくるClearInputを３つ設置してちゃんと区別できるかチェックできるようにします。

resources/js/Pages/ClearInput/Index.jsx

import {useState, useEffect} from 'react';
import ClearInput from '@/Components/ClearInput';

export default function Index() {

    // Data
    const [value1, setValue1] = useState('');
    const [value2, setValue2] = useState('');
    const [value3, setValue3] = useState('初期値あり');

    // Effect
    useEffect(() => {

        console.log('--------------------------------');
        console.log(`value1 → ${value1}`);
        console.log(`value2 → ${value2}`);
        console.log(`value3 → ${value3}`);

    }, [value1, value2, value3]);

    return (
        <div className="p-4">
            <h1 className="font-bold mb-3">&#x1F4DD; React： ワンクリックでクリアできる入力ボックス</h1>

            <div className="mb-3 w-64">
                <ClearInput value={value1} onChange={value => setValue1(value)} />
            </div>
            <div className="mb-3 w-64">
                <ClearInput value={value2} onChange={value => setValue2(value)} />
            </div>
            <div className="mb-3 w-64">
                <ClearInput value={value3} onChange={value => setValue3(value)} />
            </div>

        </div>
    );
}

コンポーネントをつくる

では、今回のメインのコンポーネント「ClearInput」です。

resources/js/Components/ClearInput.jsx

import {useState, useRef, useEffect} from 'react';

export default function ClearInput(props) {

    // 入力ボックス
    const inputRef = useRef();
    const [value, setValue] = useState(props.value || '');
    useEffect(() => { // value が変化したら実行される

        const icon = iconRef.current;

        // クリアボタンの表示・非表示
        if(value.length > 0) {

            icon.classList.remove('invisible');

        } else {

            icon.classList.add('invisible');

        }

        if(typeof props.onChange === 'function') { // 親要素に onChange があれば実行する

            props.onChange(value);

        }

    }, [value]);

    // 全削除アイコン
    const iconRef = useRef();
    const handleIconClick = () => { // アイコンをクリックしたら実行される

        setValue('');
        inputRef.current.focus();

    };
    const setIconPosition = () => { // 全削除アイコンの位置を調整する

        const input = inputRef.current;
        const icon = iconRef.current;

        if(input && icon) {

            const inputHeight = input.clientHeight;
            const iconHeight = icon.clientHeight;
            const iconTop = (inputHeight - iconHeight) / 2;

            icon.style.top = iconTop +'px';

        }

    };
    useEffect(() => { // ページが読み込まれたら実行される

        setIconPosition();

    }, []);

    return (
        <div className="relative">

            {/* 入力ボックス */}
            <input
                value={value}
                ref={inputRef}
                className="w-full px-1.5 py-1 border border-gray-300 text-gray-900"
                onChange={e => setValue(e.target.value)} />

            {/* 全削除アイコン */}
            <a
                href="#"
                ref={iconRef}
                tabIndex="-1"
                className="absolute right-2.5 invisible"
                onClick={e => handleIconClick(e)}>
                <i className="fa fa-times-circle"></i>
            </a>

        </div>
    );

}

では、この中でやっていることをひとつずつ見ていきましょう❗

【追記：2023.1.17】コードが間違っていたので修正しました。ご不便おかけしてスミマセン！

コード全体

まずコード全体の構成ですが、これまではVueで言うところの「Options API」のように「変数は変数でまとめて書く」「メソッドはメソッドで…」というようなグループ分けをして書いていましたが、今回はVue 3で導入された「Composition API」のように「役割」でグループ分けをしています。

そのため、今回の構造としては大きく「入力ボックス」と「閉じるボタン」の２ブロックになっています。