Semantic UI ReactのForm.Inputとはなんなのか

2020-07-05T23:38:19+09:00

Semantic UI React を使っていて Input と Form.Input の違いがよくわかっていなかったので、ちゃんと調べてみました。

バージョンは次のとおりです。

React: 16.13.1
Semantic UI React: 0.88.2

はじめに

リファレンスで Form.Input を選択すると書かれている通り、 Form.Input はのシンタックスシュガーです。

Sugar for .

さらに From.Field の項目を読むと、次のように書かれています。

A field is a form element containing a label and an input.

しかし、バリデーションエラー用のLabelも重要な役割を担っているので、 From.Field は次の3つを含む複合コンポーネントだと捉えた方が良いでしょう ¹ 。

項目名を表すlabel
メインの入力欄であるInput
バリデーションエラー用のLabel

さて、 Form.Field の中身を記述する方法は、大きく分けて次の2つがあります。

control を指定する方法（ Form.Input を使ったときに発生）
children （子要素）を指定する方法

個人的には後者の方が暗黙的な挙動が少なくて好きですが、前者の方が記述は楽です。
この記事では、同じDOM構造を実現するための2種類の書き方を比較することで、 Form.Input を使った場合に行われることを理解します。

2種類の記述方法を比較する

ここでは次の2つの記述方法でほぼ同じDOM構造を実現します。

Form.Input のみを使う
Form.Field の子要素に Input を含める

ソースコードは次の通りです。

import React, { useState } from "react";
import { Form, Input, Label } from "semantic-ui-react";

const FormExampleFieldError = () => {
  const [firstName, setFirstName] = useState("");
  const handleChange = e => {
    setFirstName(e.target.value);
  };
  const error = firstName === "" ? "First name is required" : undefined;

  return (
    
      {/* 1. Form.Inputのみを使う */}
      

      {/* 2. Form.Fieldの子要素にInputを含める */}
      
        First name
        
        {error && (
          
            {error}
          
        )}
      
    
  );
};

export default FormExampleFieldError;

レンダリング結果: エラー無しの場合

エラーが無い場合、レンダリング結果は次のようになりました。同等のDOM構造になっていることがわかります。なお aria-invalid="false" はデフォルト値なので、属性が無いのと同じ意味です。


    
    First name
        
    

    
    First name

レンダリング結果: エラー有りの場合

エラーが有る場合、レンダリング結果は次のようになりました。こちらも同等のDOM構造になっています。 Form.Input を使うと、 aria-invalid や aria-describedby などのアクセシビリティ関連の属性が自動で追加されていることがわかります。


    
    First name
        
        
            First name is required
    

    
    First name
        
        
            First name is required

まとめ

Semantic UI Reactでは、 Form.Input を使うことで、少ない記述で次の3要素を持つ入力欄を作成できます。

項目名を表すlabel
メインの入力欄であるInput
バリデーションエラー用のLabel

特にバリデーションエラーの表示は自前で記述するとそれなりに大変なので、積極的に使っていきたいです。

参考

Form.Fieldのソースコード

おまけ: 子要素にinputを含めた場合

リファレンスに書かれているように、 Form.Field には Input の代わりに、HTMLの input 要素を含めることもできます。この場合、若干異なるDOM構造が生成されるものの、見た目は同じになりました。DOM構造の差異は、inputが

によって囲まれない点だけです。

ソース

      {/* 3. Form.Fieldの子要素にhtmlのinputを含める */}
      
        First name
        
        {error && (
          
            {error}
          
        )}

レンダリング結果: エラー無しの場合

    
    First name

レンダリング結果: エラー有りの場合

    
    First name
        
            First name is required

エラーの有無にかかわらず、見た目では区別がつきません。

Material UIの TextField と同じようなイメージです。 ↩︎

SemanticUIでイマドキの横スクロールを実現する

2019-01-12T16:24:34+09:00

SemanticUIが好きでずっと使っています。

特にCard componentは使い勝手がよく、しょっちゅうお世話になるのですが、これをイマドキの横スクロールで使いたい。

というわけで数行のCSS魔改造で実現してみるという小ネタです。

SemanticUI、とてもよいのでよければ使ってみてください。
おしまい。

「SemanticUI」の記事 - Crieit

Semantic UI ReactのForm.Inputとはなんなのか

はじめに

2種類の記述方法を比較する

レンダリング結果: エラー無しの場合

レンダリング結果: エラー有りの場合

まとめ

参考

おまけ: 子要素にinputを含めた場合

SemanticUIでイマドキの横スクロールを実現する

完成品はこちら

やってること

まとめ