Reactガイドを読んでいくその121

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

デフォルト値

Reactのレンダーライフサイクルを見るとフォームにあるvalue属性はDOMno値を上書きする。
非制御コンポーネントでは、Reacに初期値設定をするが、後続の更新処理には関与させないようなパターンがよくある。
defaultValue属性をvalueの代わりに指定することで、このケースで扱うことができる。

例

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

今日はここまで。