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.