Javascript React.js在提交/输入无效后关注文本输入

我有一个组件，当用户点击submit（或enter）时，一个新问题会显示一个文本输入，用户输入答案并点击submits（这会重复，直到最后一个问题得到回答）

除了不对焦之外，所有的功能都正常，无论我添加了参考还是自动对焦。我不确定在这个关头该做什么，无论我怎么努力，似乎都无法让它发挥作用

我可以得到一些帮助吗？当用户点击submit时，它会关注下一个文本输入。我在代码中使用下面的样式化组件，因此文本输入将是

inputStyle

 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 => this.handleChange(event, 'value1');
    this.handleSecondChange = event => this.handleChange(event, 'value2');
    this.handleThirdChange = event => this.handleChange(event, 'value3');
    this.handleFourthChange = event => this.handleChange(event, 'value4');
    this.handleFifthChange = event => this.handleChange(event, 'value5');
    this.handleSixthChange = event => this.handleChange(event, 'value6');
    this.handleSeventhChange = event => this.handleChange(event, 'value7');
    this.handleSubmit = event => this._handleSubmit(event);
  }

  handleChange(event, type) {
    let newState = {};
    newState[type] = event.target.value;
    this.setState(newState);
  }

  _handleSubmit(event) {
    event.preventDefault();
    if (this.state.currentStep > 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 = (
        <div>
          <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}
          />
        </div>
      );
    }
    return (
      <MainContainer>
        <div style={divStyle}>
          <form
            style={{ display: this.state.display }}
            onSubmit={this.handleSubmit}
          >
            <InputHolder style={this.inputHolderStyle(ml1, 1)}>
              <InputQuestion>1. Enter A Proper Noun</InputQuestion>
              <label>
                <InputStyle
                  name="input1"
                  type="text"
                  value={this.state.value1}
                  placeholder="Proper Noun"
                  onChange={this.handleFirstChange}
                  ref1={input => {
                    this.textInput = input;
                  }}
                />
                <GrammarNerd>
                  Hint: Use words like Rebel, Hell's Angels, Vegan
                </GrammarNerd>
              </label>
            </InputHolder>
            <InputHolder style={this.inputHolderStyle(ml2, 2)}>
              <InputQuestion>2. Enter A Location</InputQuestion>
              <label>
                <InputStyle
                  name="input2"
                  type="text"
                  ref={input => {
                    this.textInput = input;
                  }}
                  value={this.state.value2}
                  placeholder="Noun"
                  onChange={this.handleSecondChange}
                  ref2={input => {
                    this.textInput = input;
                  }}
                />
                <GrammarNerd>
                  Hint: Use a word such as Base, Bunker, Foxhole, Bedroom
                </GrammarNerd>
              </label>
            </InputHolder>
            <InputHolder style={this.inputHolderStyle(ml3, 3)}>
              <InputQuestion>
                Enter A Proper Noun that Describes Evil
              </InputQuestion>
              <label>
                <InputStyle
                  name="input3"
                  type="text"
                  placeholder="Enter a Proper Noun"
                  value={this.state.value3}
                  onChange={this.handleThirdChange}
                  ref3={input => {
                    this.textInput = input;
                  }}
                />
              </label>
              <GrammarNerd>
                Hint: Use words like Empire, Ottoman, Mongols
              </GrammarNerd>
            </InputHolder>
            <InputHolder style={this.inputHolderStyle(ml3, 4)}>
              <InputQuestion>Describe Something Menacing</InputQuestion>
              <label>
                <InputStyle
                  name="input4"
                  type="text"
                  placeholder="Enter a Proper Name"
                  value={this.state.value4}
                  onChange={this.handleFourthChange}
                  ref4="theDiv"
                />
                <GrammarNerd>
                  Hint: Freeze Ray, Mother of All Bombs, Leftover Fruitcake
                </GrammarNerd>
              </label>
            </InputHolder>
            <InputHolder style={this.inputHolderStyle(ml3, 5)}>
              <InputQuestion>Describe a fortified area</InputQuestion>
              <label>
                <InputStyle
                  name="input5"
                  type="text"
                  placeholder="Enter a Noun"
                  value={this.state.value5}
                  onChange={this.handleFifthChange}
                  ref5={input => {
                    this.textInput = input;
                  }}
                />
                <GrammarNerd>
                  Hint: Castle, Bunker, Planet, Safe Space
                </GrammarNerd>
              </label>
            </InputHolder>
            <InputHolder style={this.inputHolderStyle(ml3, 6)}>
              <InputQuestion>A Woman's Name</InputQuestion>
              <label>
                <InputStyle
                  name="input6"
                  type="text"
                  placeholder="A Woman's Name"
                  value={this.state.value6}
                  onChange={this.handleSixthChange}
                  ref6={input => {
                    this.textInput = input;
                  }}
                />
              </label>
              <GrammarNerd>
                Hint: Astrid, Diana, Mononoke, Peach{' '}
              </GrammarNerd>
            </InputHolder>
            <InputHolder style={this.inputHolderStyle(ml3, 7)}>
              <InputQuestion>Describe a large area of mass</InputQuestion>
              <label>
                <InputStyle
                  name="input7"
                  type="text"
                  placeholder="Enter a Noun"
                  value={this.state.value7}
                  onChange={this.handleSeventhChange}
                  ref7={input => {
                    this.textInput = input;
                  }}
                />
              </label>
              <GrammarNerd>
                Galaxy, Planet, Wal Mart
              </GrammarNerd>
            </InputHolder>
            <InputHolderSubmit>
              <SubmitButton onClick={this.focus} type="submit" value="Submit" />
            </InputHolderSubmit>
          </form>
        </div>
        <NextQuestion>
          {question}
        </NextQuestion>
      </MainContainer>
    );
  }
}

export default NameForm;

类名称表单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.focus=this.focus.bind（this）；
此.state={
值1:“”，
值2:“”，
值3:“”，
值4:“”，
值5:“”，
值6:“”，
值7:“”，
新值：“”，
提交：假，
输入1:0，
输入2:0，
输入3:0，
输入4:0，
输入5:0，
输入6:0，
输入7:0，
显示：“块”，
当前步骤：1，
白盒：“块”
};
this.handleFirstChange=event=>this.handleChange（事件'value1'）；
this.handleSecondChange=event=>this.handleChange（事件'value2'）；
this.handleThirdChange=event=>this.handleChange（事件'value3'）；
this.handleFourthChange=event=>this.handleChange（事件'value4'）；
this.handleFifthChange=event=>this.handleChange（事件'value5'）；
this.handleSixthChange=event=>this.handleChange（事件'value6'）；
this.handleSeventhChange=event=>this.handleChange（事件'value7'）；
this.handleSubmit=event=>this.\u handleSubmit（event）；
}
handleChange（事件，类型）{
让newState={}；
newState[type]=event.target.value；
this.setState（newState）；
}
_handleSubmit（事件）{
event.preventDefault（）；
如果（this.state.currentStep>6）{
this.setState（{visible:！this.state.visible}）；
this.setState（{display:'none'}）；
this.setState（{whitebox:'none'}）；
}否则{
this.setState（{currentStep:this.state.currentStep+1}）；
}
}
inputHolderStyle（样式，步骤）{
const displayProp=step==this.state.currentStep？'block'：'none'；
返回{
//背景：`url（${style}）无重复中心`，
//背景尺寸：'封面'，
//边框：“白色1px实心”，
//背景：“#00B5DE”，
显示：displayProp
};
}
焦点（）{
//使用原始domapi显式聚焦文本输入
this.textInput.focus（）；
}
render（）{
常量divStyle={
marginTop:'50px'，
颜色：'白色'，
顶部：“25px”，
位置：'绝对'，
宽度：“320px”，
textAlign:'中心'，
边框：“白色1px实心”，
填充：“1em”，
边界半径：“3px”，
显示：this.state.whitebox
};
让问题=null；
const show=this.state.visible；
如果（显示）{
问题=(
);
}
返回(
1.输入专有名词
{
this.textInput=输入；
}}
/>
提示：使用叛逆、地狱天使、素食主义者等词
2.输入一个位置
{
this.textInput=输入；
}}
value={this.state.value2}
占位符=“名词”
onChange={this.handleSecondChange}
ref2={input=>{
this.textInput=输入；
}}
/>
提示：使用诸如基地、掩体、散兵坑、卧室之类的词
输入描述邪恶的专有名词
{
this.textInput=输入；
}}
/>
提示：使用诸如帝国、奥斯曼、蒙古人之类的词语
描述有威胁性的事情
提示：冻结雷，所有炸弹之母，剩下的水果蛋糕
描述一个设防区
{
this.textInput=输入；
}}
/>
提示：城堡，地堡，行星，安全空间
女人的名字
{
this.textInput=输入；
}}
/>
提示：阿斯特丽德、戴安娜、莫诺克、桃子{''}
描述大面积的质量
{
this.textInput=输入；
}}
/>
银河，星球，沃尔玛
{问题}
);
}
}
导出默认名称表单；

我留下了一些我测试过的代码（ref和autofocus）以及一些似乎没有破坏代码但也不起作用的函数

---

P>谢谢你的帮助

< P>固定，考虑以下

由于您使用display:none隐藏每个问题，因此它们仍会呈现到DOM中，因此无论您在哪个问题上，都会执行每个ref。您正在分配给this.textInput，因此this.textInput将只有input7的元素<

componentDidUpdate() {
  this.textInput && this.textInput.focus();
} 

import React, { Component } from "react";

export default class AutoFocusText extends Component {
    constructor() {
        super();

        this.state = {
            active: 0,
            questions: [
                "how are you?",
                "whats your name?",
                "is reactjs awesome?"
            ],
            value: "",
            answers: []
        };

        this.submitHandler = this.submitHandler.bind(this);
        this.renderQuestion = this.renderQuestion.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    renderQuestion() {
        const { questions, active, value } = this.state;

        if (active >= questions.length) return <div>You're Done!</div>;

        return questions
            .filter((quest, index) => index === active) // get next question
            .map(quest =>    // map over selected question, the key prop allows react to
                <FormElement // unmount and mount the components properly, thereby focussing correctly
                    key={active}
                    text={quest}
                    value={value}
                    onChange={this.onChange}
                />
            );
    }

    onChange(e) {
        this.setState({ value: e.target.value });
    }

    submitHandler(e) {
        e.preventDefault();

        const answers = [...this.state.answers, this.state.value]; //push new value to answsers array without mutation
        const value = ""; // clear input
        const active = this.state.active + 1; // index pointer

        this.setState({ answers, value, active });
    }

    render() {
        return (
            <div>
                {/* Form Wrapper */}
                <form onSubmit={this.submitHandler}>
                    {this.renderQuestion()}
                    <button type="submit">Submit</button>
                </form>
                <ul>
                    {this.state.answers.map((ans, index) => {
                        return (
                            <li key={index}>
                                {ans}
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

class FormElement extends Component {
    constructor() {
        super();
    }

    componentDidMount() {
        //focus text input upon mounting component 
        this.textInput.focus();
    }

    render() {
        const { text, value, onChange } = this.props;

        return (
            <div>
                <p>
                    {text}
                </p>
                <input
                    ref={el => {
                        this.textInput = el;
                    }}
                    onChange={onChange}
                    type="text"
                    value={value}
                />
            </div>
        );
    }
}