すべてのカテゴリ

React で入力フィールドの文字を表示するステップ５では入力フィールドに入力された文字を Reactde 表示する方法です。これも、React と Vue では若干違ったやり方になります。この記事では React で実現する二つの方法を紹介しています。リファレンスを使う方法Vue では「v-model」という方法を使って、入力フィールに入力された文字と変数を結びつけていました。（binding）React でも似たような機能としてリファレンス（reference）ができます。import React, { useState } from "react";import "./styles/step5.css";export default function Step5(): JSX.Element {  const fieldValue: React.RefObject<HTMLInputElement> =    React.createRef<HTMLInputElement>();  const [value, setValue] = useState("");  return (    <React.Fragment>      <div className="step5">        <input type="text" ref={fieldValue} onChange={() => getValue()} />        <p>{value}</p>      &lt

Reactのステートは注意が必要です！Reactを利用してフロントエンドのUI（ユーザーインターフェース）を作ると、変更があった部分だけを書き換えてくれるので便利です。これに関連して、前回投稿した変数の扱いでReactのステートを使う場合には注意する必要があるという話を書きました。これに関しては、ご質問が多かったのでもう少し詳しく書いて行く事にします。この機能を利用するには「ステート（state）」で変数を管理して、ステートの変化のイベントを検出する必要があります。ところが、配列やオブジェクトはReactのステートではイミュータブルではないので、正しく実装しないと意図した動作をしない事があります。入力した文字列を配列に追加するアプリ少し具体的な例で説明をします。 シンプルなあぷりとして、文字列を入力する「input」とボタンのシンプルなフォームでボタンが押されたら、入力された文字列を配列に追加するアプリを考えます。これを、Reactのクラスコンポーネントで書くとimport React from "react";import { produce } from "immer";import "bootswatch/dist/spacelab/bootstrap.min.css";import "./App.css";interface IProps {}interface IState {  samples: Array<string>;}class App extends React.Component<IProps, IState> {  privat