やりたいこと
フォームから名前を入力すると、リアルタイムで「あなたの名前は○○です。」と表示するReactアプリケーションを作ってみたいと思います。
やり方
Reactアプリケーションを作成
※ Nodeやnpmがインストールされていない場合は事前にインストールしてください。
Node.js公式サイト
ローカルの任意の場所で以下のコマンドを打つ
npx create-react-app my-app
cd my-app
npm start
表示されるアドレスにブラウザからアクセス
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.2:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
こういう画面が表示されればOK
フォームの編集
フォーム要素の配置
src/App.jsを以下のように編集
function App() {
return(
<div>
<p>名前を入力してください。</p>
<input value=""/>
<p>あなたの名前は○○です。</p>
</div>
)
}
export default App;
画面を確認して、名前のフォーム要素が表示されていることを確認
入力時の処理
src/App.jsを以下のように編集する
import { useState } from 'react';
function App() {
const [input, setInput] = useState('太郎');
return(
<div>
<p>名前を入力してください。</p>
<input value={input} onInput={e => setInput(e.target.value)} />
<p>あなたの名前は{input}です。</p>
</div>
)
}
export default App;
ポイントは以下。
-
import { useState } from 'react';でuseStateというReactフックをインポートする(Rectフック = クラス等を書かずにステートを管理できる仕組み)
import { useState } from 'react';
- フォームの値を持つための
inputという変数を用意し、setInputでinputの値が変わるようにuseStateフックを使って定義。初期値は「太郎」とする。
const [input, setInput] = useState('太郎');
- フォームの
onInputイベントでsetInputを呼び出すようにする
<input value={input} onInput={e => setInput(e.target.value)} />
- 「あなたの名前は○○です。」の部分に
inputを埋め込む
<p>あなたの名前は{input}です。</p>
フォームに入力し、リアルタイムで「あなたの名前は○○です。」が更新されることを確認
スタイルの編集
必要であればsrc/App.jsにimport './App.css'とクラスを付与してscr/App.cssを編集
import './App.css';
import { useState } from 'react';
function App() {
const [input, setInput] = useState('太郎');
return(
<div class="wrapper">
<p>名前を入力してください。</p>
<input value={input} onInput={e => setInput(e.target.value)} />
<p class="result">あなたの名前は{input}です。</p>
</div>
)
}
export default App;
.wrapper {
display: flex;
flex-direction: column;
width: 90%;
height: 100vh;
border-radius: 5px;
background-color: #f2f2f2;
padding: 40px;
}
input {
width: 100%;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
padding-bottom: 12px;
}
.result {
font-size: 100px;
margin: auto;
}
CSSはこちらをほぼコピペしました
名前の表示をクソデカにしてみた
できあがり！