Help us understand the problem. What is going on with this article?

Reactのinput(単一inputで成功)

More than 1 year has passed since last update.

https://qiita.com/y_ohr/items/3edf241c5ac1952afd05 の続きです。

環境

Ubuntu 18.04.2 LTS
node v8.10.0
npm 3.5.2
create-react-app v2.1.5

3行まとめ

  • Reactのjsxで、inputのtextにprop.valueを設定した
  • しかし、動かしてみたらUIからinputの値を変更できなかった
  • stateを使用したら、変更できるようになった

調べる

公式ドキュメントのフォーム項を読む。
https://ja.reactjs.org/docs/forms.html

  • 制御されたコンポーネント

HTML では <input><textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保持しており、ユーザーの入力に基づいてそれを更新します。React では、変更されうる状態は通常はコンポーネントの state プロパティに保持され、setState() 関数でのみ更新されます。

React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させることができます。そうすることで、フォームをレンダーしている React コンポーネントが、後続するユーザー入力でフォームで起きることも制御できるようになります。このような方法で React によって値が制御される入力フォーム要素は「制御されたコンポーネント」と呼ばれます。

なるほど。つまり・・・

  • inputのvalueはstateから設定する
  • stateを変更するとvalueに反映される
  • inputのonchangeでstateを変更する
  • stateはsetState()で設定する

という理解。

inputのvalueをstateで設定するように修正

src/index.js
diff --git a/src/index.js b/src/index.js
index 8d285cc..7f4962d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,12 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';

 class Square extends React.Component {
+    constructor(prop) {
+        super(prop);
+        this.state = { value: prop.value };
+    }
+
     render() {
         return (
             <input
                 type="text"
-                value={this.props.value}
+                value={this.state.value}
                 className="square"
+                onChange={e => this.setState({ value: e.target.value })}
             >
             </input>
         );

上記で動かしたら、UIから値を変更できるようになりました:tada:

感想

  • 次は複数のinputを連動させたい
  • 親子コンポーネントでそれぞれonChange()をハンドルしていると、両方発火する?発火する場合、順番は?
  • 今回は未使用だけど、公式のフォームDocs例にある、コンストラクタのthis.handleChange = this.handleChange.bind(this)<input type="text" value={this.state.value} onChange={this.handleChange} />は、一見冗長に見える
  • ReactのDocsやTutorialの公式日本語があるのを知らなかった・・・

以上

y_ohr
投稿する意見や活動内容は私個人の見解に基づくものであり、所属企業・部門見解を代表するものではありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away