React 切り替えた input タグに focus させたい

React入門初心者マンです。

作者: Stoyan Stefanov,牧野聡
出版社/メーカー: オライリージャパン
発売日: 2017/03/11
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

この本をやっていてエクセルのようなものを作る例があり、セルをダブルクリックしたら編集モードに切り替わるコンポーネントを作っていました。編集モードになった時に自動的にinputタグにフォーカスさせたかったのでメモ

"react": "^16.8.3",
"react-dom": "^16.8.3",

DOMにアクセスして `.focus()` でフォーカスさせる

状態じゃないから？結局はDOMに対して.focus()させるしかないっぽいです。

input タグに ref属性を設定
this.refs["ref_value"]で対象ref属性を持つDOMにアクセスできる
DOMにアクセスして.focus()でフォーカスさせる

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Cell extends Component {
  componentDidUpdate() {
    if( this.props.isEdit ) {
      this.refs['text-cell'].focus();
    }
  }

  render() {
    let content = this.props.value;
    if( this.props.isEdit ) {
      content = (
        <input
          type="text"
          ref="text-cell"
          defaultValue={this.props.value}
        />
      );
    }
    return (
      <td>{content}</td>
    );
  }
}