JavaScript– category –

本記事では、ReactでWarning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.のエラーが...

本記事では、ReactでコンソールログにWarning: Each child in a list should have a unique "key" prop.のエラーが表示された時の対処法について解説しています。 【対処法】 まず始めにエラーの対処法ですが、とても簡単でkey属性の値に一意のキーを指定...

本記事では、Reactで選択されたラジオボタンのvalue属性の値を取得(判定)する方法についてサンプルコードを用いて解説しています。 【サンプルコード】 選択されたラジオボタンのvalue属性の値を取得するサンプルコードを用意しました。注目して欲しいポイ...

本記事では、Reactでクリックされた時に特定の処理を実行する方法について解説しています。 【clickイベントの使い方】 クリックされた時に特定の処理を実行したい時は、clickイベントを使用します。基本的な使い方は以下のとおりです。 function App() { ...

本記事では、Reactでinputに値や文字が入力できない時の原因と対処法について解説しています。 inputに入力が出来ない時の原因で考えられるのは、通常の変数に入力された値を代入させそれをvalue属性にセットしているケースです。下記のコードをご覧くださ...

本記事では、Reactでinputに入力された値をリアルタイムで取得する方法について解説しています。 【サンプルコード】 下記のコードは、テキストフォームに入力された値をリアルタイムで表示させるサンプルコードです。このサンプルコードを用いて解説して...

本記事では、Reactで配列に代入されている複数の値を表示(展開)する方法について解説しています。 【mapメソッドを使う】 配列に代入されている複数の値を表示させるには、一般的にJavaScriptのmapメソッドを使用します。 mapメソッドについて簡単に説明す...

本記事では、ReactのuseStateで配列を使う方法について解説しています。 【useStateで配列を使う方法】 useStateで配列を使用したサンプルコードを用意したので、これを利用して解説していきます。 コードの内容は、テキストフォームに値を入力しフォーカ...

本記事では、ReactのuseStateの基本的な使い方について解説しています。 【useStateの使い方】 下記のコードはuseStateを使って、ボタンをクリックすると1ずつインクリメントされた数値が表示されるプログラムです。 import { useState } from "react...

本記事では、Reactのコメントアウトの書き方について解説しています。 ReactのJSX内でのコメントアウトの書き方は以下のとおりです。 {/* コメントアウト */} JSXの外であれば、通常のJavaScriptと同様に単一行のコメントアウトをする「//」、複数行のコメ...