Reagovat a autofokus

I když miluji ReactJS, mohu říci, že někdy zjišťuji, že interakce, které byly snadné během pre-ReactJS, jsou nepříjemně obtížné nebo alespoň „nepřímé“. Jedním příkladem je správné zajištění, že daný <input> prvek se zaostří, když klepnete na tlačítko v jiné komponentě; za starých časů to byly tři řádky kódu, ale s Reactem to může být více.

Pojďme se podívat na několik strategií, jak se správně zaměřit na <input> prvky s ReactJS.

autofocus

autofocus Atribut je v ReactJS respektován, ale pouze v případě <input> prvek je znovu vykreslen pomocí React:

<input type="text" autofocus="true" />

autofocus se snadno používá, ale funguje pouze v případě <input> je zpočátku vykreslen; protože React inteligentně vykresluje pouze prvky, které se změnily, autofocus atribut není ve všech případech spolehlivý.

componentDidUpdate s ref

Protože se nemůžeme spoléhat pouze na autofocus atribut, můžeme použít componentDidUpdate pro dokončení zaměření:

class Expressions extends Component {

  _input: ?HTMLInputElement;

  // ....

  componentDidUpdate(prevProps, prevState) {
    this._input.focus();
  }

  render() {
      return (
        <div className={this.state.focused ? "focused": ""}>
            <input
              autofocus="true"
              ref={c => (this._input = c)}
            />
        </div>
      );
    }
  }
}

componentDidUpdate spustí se po aktualizaci komponenty, takže jakákoli změna nadřazené komponenty by spustila tuto metodu a vaše <input> dostane pozornost. V mých případech obvykle přepínám className na nadřazeném prvku, aby signalizoval, že prvek je aktivní, a tedy componentDidUpdate spustí se.

Moje perspektiva interakce mezi widgety byla zformována v dobách dijit UI frameworku Dojo, kde každý widget měl obvykle odkaz na každý podřízený widget; s ReactJS se (doufejme) vyhýbá ref s a pomocí state , což je logické, ale stále je tu ta část mě, která touží po jednoduchém odkazu, a proto mi druhá strategie dává smysl.