Kāds ir reaktīvais veids, kā pēc komponenta atveidošanas fokusu iestatīt uz konkrētu teksta lauku?
Dokumentācija, šķiet, iesaka izmantot refs, piem:
Izveidošanas funkcijā iestatiet ref="nameInput"
manam ievades laukam un pēc tam izsauciet:
this.refs.nameInput.getInputDOMNode().focus();
Bet kur man tas jāizsauc? Esmu izmēģinājis vairākas vietas, bet nevaru panākt, lai tas darbotos.
@Dhiraj'atbilde ir pareiza, un ērtības labad varat izmantot autoFocus prop, lai ievade automātiski fokusētos, kad tā ir uzstādīta:
<input autoFocus name=...
Ievērojiet, ka jsx tas ir autoFocus
(ar lielo F), atšķirībā no vecā html, kurā lieli un mazi burti nav izšķirti.
Tā vietā tas jādara componentDidMount
un refs callback
. Kaut kas līdzīgs šādam
componentDidMount(){
this.nameInput.focus();
}
class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input
defaultValue="Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="will focus"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>