当サイトは、アフィリエイト広告を利用しています

Reactでinput 要素が入力できない時の対応

作成日：2022月03月06日
更新日：2024年03月28日

Reactでinputのvalue属性に、angularやvueみたいに変数を紐づけて書くと
バインドされるかと思っていたが、inputの値が入力できなくなったので原因調べてみた。

入力できないパターン

下記のような書き方をした場合にinputの値は入力できなくなった。

jsx
import "./styles.css";


export default function App() {


  let aaa = "aaaaa"
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="text" value={aaa}/>
      {aaa}
    </div>
  );
}

対応方法

対応方法としては

  • useState
  • useRef

を使う方法がある

useStateを使う

inputのvalue属性はstateを通して操作する

jsx
import "./styles.css";
import React, { useState } from "react";


export default function App() {
    // useState
  const [state, setState] = useState("初期値");


  return (
    <div className="App">
      <h1>sample</h1>
      <input
        type="text"
        value={state}
        onChange={(e) => setState(e.target.value)}
      />
      {state}
    </div>
  );
}

onChangeでevnetを受け取り、setStateに渡すようにする。
実際に動作するか確認してみる

React input cannot Enter(useState)

useStateの基本や使い方ついては下記記事で紹介しています

useRefを使う

input要素をuseRefで紐づけて操作する。

jsx
import "./styles.css";
import React, { useState, useRef } from "react";


export default function App() {
  // useState
  const [state, setState] = useState("初期値");
  // useRef
  // domのinputと紐づける
  const inputVal = useRef(null);


  // input要素のvalueをstateに設定する
  const confilm = () => {
    setState(inputVal.current.value);
  };


  //削除する
  const del = () => {
    inputVal.current.value = null
    setState(inputVal.current.value);
  };


  return (
    <div className="App">
      <h1>sample</h1>
      <input type="text" ref={inputVal} />
      <button onClick={confilm}>決定</button>
      <button onClick={del}>削除</button>
      <div>{state}</div>
    </div>
  );
}
  • useRefは変更されても再レンダリングは走らない。
  • そのためボタン押下でuseRefの値をuseStateにセットして再レンダリングさせる。

実際に動作確認してみる

React input cannot Enter(useRef)

useRefの使い方については下記記事で紹介しています

参考

reactでinputを扱う　　

新着記事

タグ別一覧
top