javascript - Is it possible to set the "tab position" in an html doc using React -

assume have component:

   react.createclass({       getinitialstate: function() {         return {pg: 0};       },       nextpage: function(){         this.setstate({ pg: this.state.pg+1} )       },       render: function() {         var inputs = [ <input key={1} placeholder="one"/>,                         <input key={2} placeholder="two"/>,                         <input key={3} placeholder="three"/>]         if(this.state.pg === 1){           inputs = [ <input key={4} placeholder="four"/>,                       <input key={5} placeholder="five"/>,                       <input key={6} placeholder="six"/>]         }         return(           <div>               <h1>start here</h1>               {inputs}               <button onclick={this.nextpage.bind(this)}>next</button>           </div>         );       }     }); 

https://jsfiddle.net/69z2wepo/75909/

i aiming easy workflow. inputs placed 1 after can edited without needing mouse. process go this

• click "start here" set "tab position"
• hit tab
• enter value, hit tab
• enter value, hit tab
• enter value, hit tab
• hit enter

however when change next page, need manually click "start here" in order able again.

is there anyway can automatically move tab position "start here"? (i don't want focus on first input element until user hits tab)

per comment , op's request make answer. want have listener tab key , programatically focus input when tab pressed. trick remove listener after applying focus naturally focus next input.

var somecomponent = react.createclass({     getinitialstate: function () {         return { pg: 0 };     },     componentdidmount: function () {         window.addeventlistener('keydown', this.handlekeypress)     },     componentwillunmount: function () {         window.removeeventlistener('keydown', this.handlekeypress)     },     handlekeypress: function (e) {         e.preventdefault();         if (e.keycode === 9) {             this.refs.firstinput && this.refs.firstinput.focus();             window.removeeventlistener('keydown', this.handlekeypress)         }     },     nextpage: function () {         this.setstate({ pg: this.state.pg + 1 }, function () {             window.addeventlistener('keydown', this.handlekeypress)         })     },     render: function () {         var inputs = [<input key={1} ref="firstinput" placeholder="one" />,         <input key={2} placeholder="two" />,         <input key={3} placeholder="three" />]         if (this.state.pg === 1) {             inputs = [<input key={4} ref="firstinput" placeholder="four" />,             <input key={5} placeholder="five" />,             <input key={6} placeholder="six" />]         }         return (             <div>                 <h1> start here</h1>                 {inputs}                 <button onclick={this.nextpage}>next</button>             </div>         );     } });