title: React.js focus on text input after submit/enter not working
body: <p>I have a component that when the user hits submit (or enter) a new question is presented with a text input, the users enters in an answer and hits submits (this repeats until the final question is answered).</p>
  
  <p>All works except that it's not focusing no matter if I add a ref or autofocus.  I'm unsure what to do at this juncture and can't seem to get it to work no matter what I try.</p>
  
  <p>Could I get some assistance on, when the user hits submit, it focuses on the next text input.  I'm using styled components below in my code so the text input would be <code>inputStyle</code></p>
  
  <pre><code> class NameForm extends React.Component {
    constructor(props) {
      super(props);
      this.focus = this.focus.bind(this);
      this.state = {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: '',
        newValue: '',
        submitted: false,
        input1: 0,
        input2: 0,
        input3: 0,
        input4: 0,
        input5: 0,
        input6: 0,
        input7: 0,
        display: 'block',
        currentStep: 1,
        whitebox: 'block'
      };
  
      this.handleFirstChange = event =&gt; this.handleChange(event, 'value1');
      this.handleSecondChange = event =&gt; this.handleChange(event, 'value2');
      this.handleThirdChange = event =&gt; this.handleChange(event, 'value3');
      this.handleFourthChange = event =&gt; this.handleChange(event, 'value4');
      this.handleFifthChange = event =&gt; this.handleChange(event, 'value5');
      this.handleSixthChange = event =&gt; this.handleChange(event, 'value6');
      this.handleSeventhChange = event =&gt; this.handleChange(event, 'value7');
      this.handleSubmit = event =&gt; this._handleSubmit(event);
    }
  
    handleChange(event, type) {
      let newState = {};
      newState[type] = event.target.value;
      this.setState(newState);
    }
  
    _handleSubmit(event) {
      event.preventDefault();
      if (this.state.currentStep &gt; 6) {
        this.setState({ visible: !this.state.visible });
        this.setState({ display: 'none' });
        this.setState({ whitebox: 'none' });
      } else {
        this.setState({ currentStep: this.state.currentStep + 1 });
      }
    }
  
    inputHolderStyle(style, step) {
      const displayProp = step === this.state.currentStep ? 'block' : 'none';
  
      return {
        // background: `url(${style}) no-repeat center center`,
        // backgroundSize: 'cover',
        // border: 'white 1px solid',
        // background: '#00B5DE',
        display: displayProp
      };
    }
  
    focus() {
      // Explicitly focus the text input using the raw DOM API
      this.textInput.focus();
    }
  
    render() {
      const divStyle = {
        marginTop: '50px',
        color: 'white',
        top: '25px',
        position: 'absolute',
        width: '320px',
        textAlign: 'center',
        border: 'white 1px solid',
        padding: '1em',
        borderRadius: '3px',
        display: this.state.whitebox
      };
      let question = null;
      const show = this.state.visible;
      if (show) {
        question = (
          &lt;div&gt;
            &lt;Crawler
              properName1={this.state.value1}
              noun1={this.state.value2}
              properName2={this.state.value3}
              properName3={this.state.value4}
              noun2={this.state.value5}
              personsName1={this.state.value6}
              noun3={this.state.value7}
            /&gt;
          &lt;/div&gt;
        );
      }
      return (
        &lt;MainContainer&gt;
          &lt;div style={divStyle}&gt;
            &lt;form
              style={{ display: this.state.display }}
              onSubmit={this.handleSubmit}
            &gt;
              &lt;InputHolder style={this.inputHolderStyle(ml1, 1)}&gt;
                &lt;InputQuestion&gt;1. Enter A Proper Noun&lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input1"
                    type="text"
                    value={this.state.value1}
                    placeholder="Proper Noun"
                    onChange={this.handleFirstChange}
                    ref1={input =&gt; {
                      this.textInput = input;
                    }}
                  /&gt;
                  &lt;GrammarNerd&gt;
                    Hint: Use words like Rebel, Hell's Angels, Vegan
                  &lt;/GrammarNerd&gt;
                &lt;/label&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolder style={this.inputHolderStyle(ml2, 2)}&gt;
                &lt;InputQuestion&gt;2. Enter A Location&lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input2"
                    type="text"
                    ref={input =&gt; {
                      this.textInput = input;
                    }}
                    value={this.state.value2}
                    placeholder="Noun"
                    onChange={this.handleSecondChange}
                    ref2={input =&gt; {
                      this.textInput = input;
                    }}
                  /&gt;
                  &lt;GrammarNerd&gt;
                    Hint: Use a word such as Base, Bunker, Foxhole, Bedroom
                  &lt;/GrammarNerd&gt;
                &lt;/label&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolder style={this.inputHolderStyle(ml3, 3)}&gt;
                &lt;InputQuestion&gt;
                  Enter A Proper Noun that Describes Evil
                &lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input3"
                    type="text"
                    placeholder="Enter a Proper Noun"
                    value={this.state.value3}
                    onChange={this.handleThirdChange}
                    ref3={input =&gt; {
                      this.textInput = input;
                    }}
                  /&gt;
                &lt;/label&gt;
                &lt;GrammarNerd&gt;
                  Hint: Use words like Empire, Ottoman, Mongols
                &lt;/GrammarNerd&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolder style={this.inputHolderStyle(ml3, 4)}&gt;
                &lt;InputQuestion&gt;Describe Something Menacing&lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input4"
                    type="text"
                    placeholder="Enter a Proper Name"
                    value={this.state.value4}
                    onChange={this.handleFourthChange}
                    ref4="theDiv"
                  /&gt;
                  &lt;GrammarNerd&gt;
                    Hint: Freeze Ray, Mother of All Bombs, Leftover Fruitcake
                  &lt;/GrammarNerd&gt;
                &lt;/label&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolder style={this.inputHolderStyle(ml3, 5)}&gt;
                &lt;InputQuestion&gt;Describe a fortified area&lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input5"
                    type="text"
                    placeholder="Enter a Noun"
                    value={this.state.value5}
                    onChange={this.handleFifthChange}
                    ref5={input =&gt; {
                      this.textInput = input;
                    }}
                  /&gt;
                  &lt;GrammarNerd&gt;
                    Hint: Castle, Bunker, Planet, Safe Space
                  &lt;/GrammarNerd&gt;
                &lt;/label&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolder style={this.inputHolderStyle(ml3, 6)}&gt;
                &lt;InputQuestion&gt;A Woman's Name&lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input6"
                    type="text"
                    placeholder="A Woman's Name"
                    value={this.state.value6}
                    onChange={this.handleSixthChange}
                    ref6={input =&gt; {
                      this.textInput = input;
                    }}
                  /&gt;
                &lt;/label&gt;
                &lt;GrammarNerd&gt;
                  Hint: Astrid, Diana, Mononoke, Peach{' '}
                &lt;/GrammarNerd&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolder style={this.inputHolderStyle(ml3, 7)}&gt;
                &lt;InputQuestion&gt;Describe a large area of mass&lt;/InputQuestion&gt;
                &lt;label&gt;
                  &lt;InputStyle
                    name="input7"
                    type="text"
                    placeholder="Enter a Noun"
                    value={this.state.value7}
                    onChange={this.handleSeventhChange}
                    ref7={input =&gt; {
                      this.textInput = input;
                    }}
                  /&gt;
                &lt;/label&gt;
                &lt;GrammarNerd&gt;
                  Galaxy, Planet, Wal Mart
                &lt;/GrammarNerd&gt;
              &lt;/InputHolder&gt;
              &lt;InputHolderSubmit&gt;
                &lt;SubmitButton onClick={this.focus} type="submit" value="Submit" /&gt;
              &lt;/InputHolderSubmit&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;NextQuestion&gt;
            {question}
          &lt;/NextQuestion&gt;
        &lt;/MainContainer&gt;
      );
    }
  }
  
  export default NameForm;
  </code></pre>
  
  <p>I have left some of my code I've tested (ref and autofocus) as well as some of the functions that don't seem to break the code, but are not working either.</p>
  
  <p>Thank you for your help</p>