🚀

入力フォームの作り方【React×MUI】

かめ

2024/04/08に公開

React

tech

ここでは、ReactでWEBアプリの画面を作っているときに、テキストボックスを設けて文字を入力できるようにする方法を紹介していきたいと思います。

完成形はコチラ↓

まずはコードを見ていきましょう。

import React from 'react';
import TextField from '@mui/material/TextField';

{/*　中略　*/}

<TextField />

実はたったこれだけでテキストボックスが生成できます。
（ここでは画面を構成するための関数に関する記述は省略しています。）

テキストボックスを生成するには<TextField> タグを使用します。

上記のコードを実行してみます。

すると、

四角い枠ができました。

このように文字を入力することができます。

これで目的はひとまず果たせたわけですが、このままだとサイズがデフォルトのままになっているので、長すぎて使いにくそうです。サイズを指定してあげましょう。

<TextField
  sx={{ "& .MuiInputBase-input": { height: 50 }, width: 500 }}　{/*　追加　*/}
/>

するとこのようになります。

少しスマートになりましたね。ここでは高さを50px、幅を500pxに指定しています。"& .MuiInputBase-input"の部分は、<TextField>で生成したテキストボックスそのものを指しています。まあいわば決まり文句みたいなものなので、あまり深く考えずそのまま記載してください。

ここからは余談ですが、文字を入力していない状態（四角枠だけの状態）の時に、薄い文字でコメントを記載することができます。こんな感じです。

コードはコチラ↓

<TextField
  sx={{ "& .MuiInputBase-input": { height: 50 }, width: 500 }}
  placeholder="文字を入力" {/*　追加　*/}
/>

placeholder プロパティを設定することで、何を入力すべきかを示す簡単なテキストをテキストフィールド内に表示することができます。もちろん、文字を入力したら消えます。

次に、改行ができるように変更します。デフォルトのままでは、実は改行することができません。なので、改行を有効にするために下のようにコードを変更します。

<TextField
  sx={{ "& .MuiInputBase-input": { height: 50 }, width: 500 }}
  placeholder="文字を入力"
  multiline　　{/*　追加　*/}
  rows={3}　　　　{/*　追加　*/}
/>

するとこうなります。

multiline プロパティを追加したことで、改行してテキストを入力できるようになりました。Shift + Enter　で改行できます。また、ここではさらにrows={3} というプロパティも追加しています。これは、テキストエリアが初期状態で3行分の高さを持つことを指定しています。これを指定しない場合は、改行して行を増やすごとに、枠の高さが広がるようになります。

最後に、テキストフィールドのデザインを変更してみます。以下のようにコードを変更します。

<TextField
  sx={{ "& .MuiInputBase-input": { height: 50 }, width: 500 }}
  placeholder="文字を入力"
  multiline
  rows={3}
  variant="standard"　{/*　追加　*/}
/>

するとこうなります。

一本の線だけになりましたね。variantプロパティは、テキストボックスの外観を指定することができます。

  variant="filled" {/*　変更　*/}

このように変更すると、

このように背景色がつきました。

まとめ

テキストボックスは<TextField>タグで作ることができる。
またプロパティを追加することでいろいろなカスタマイズができる。

株式会社XronotechPublication

福岡でシステム開発を行うXronotechの公式アカウントです。 Webアプリやスマホアプリを開発しています。

まとめ

Discussion