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

Uncontrolledなコンポーネントと戦う in ReactJS

More than 1 year has passed since last update.

ときどきハマるので書いておきます。

inputタグやtextareaタグをReactで使うときはフルコントロールなコンポーネントにする

フォーム系のinputタグやtextareaタグに代表されるコンポーネントはUncontrolledなコンポーネントと呼ばれ、
入力内容がHTMLの入力欄自体で保持されています。
これの何が問題になるのかというと

  • コンポーネントがUnmountされないと入力欄がクリアされない
  • React RouterやStateの切り替えなどで同じ入力欄を持つコンポーネントを連続で表示する場合、Ummountされないため入力欄に前の入力状態が残ってしまう。

参考:You Probably Don't Need Derived State

意訳:getDerivedStateFromPropsは使う必要ないよ

回避策

2つあります。

onChangeで常に値を監視し、親コンポーネント側でstateに保存します。value属性にpropsで常に更新したstateを渡します。

例えば、Emailの入力欄のフルコントロールコンポーネントを次のように作成します。

function EmailInput(props) {
  return <input onChange={props.onChange} value={props.email} />;
}

例:https://codesandbox.io/s/6v1znlxyxn

keyの属性にユニークキーをつけることで別物のinputタグとして判別される

この場合、valueを常に更新する必要はありません。ただし、ユニークなキーでなければなりません。

<input defaultValue={props.defaultEmail} key={this.props.user.id} />
teradonburi
気管支喘息を患って死にかけです。 いつ死ぬかわかりません。 成人喘息は誰でもなりえるものだし、 咳喘息から気管支喘息に進行すると慢性的な死の危険があるものです。 自身や周りで数週間咳が続いてる人がいたら気をつけて・・・ Twitterフォローいただけたらフォロバします。 https://twitter.com/teradonburi
meetsmore
プロを探せる見積りプラットフォーム「ミツモア」の開発・運営
https://meetsmore.com
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