TypeError：无法读取未定义焦点的属性“当前”

Question

我有4个输入，我希望当用户填充第一个输入时，专注于第二个输入。

  constructor(props) {
    ...
    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
    this.textInput3 = React.createRef();
    this.textInput4 = React.createRef();

    this.onChangeInputText = this.onChangeInputText.bind(this)

---

  onChangeInputText(e){
    const index = e.currentTarget.dataset.index;
    console.log('index',index)
    if(index == 1)
      this.setState({'cardNumber1':e.target.value})
    if(index == 2)
      this.setState({'cardNumber2':e.target.value})
    if(index == 3)
      this.setState({'cardNumber3':e.target.value})
    if(index == 4)
      this.setState({'cardNumber4':e.target.value})

      if (e.target.value.length == 4) {
        this[`textInput${index + 1}`].current.focus()
      }
  }

我的看法：

  <input onChange={this.onChangeInputText} data-index={4} ref={this.textInput4} value={cardNumber4}  name="card4" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="4" maxLength="4" />
  <input onChange={this.onChangeInputText} data-index={3} ref={this.textInput3} value={cardNumber3}  name="card3" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="3" maxLength="4" />
  <input onChange={this.onChangeInputText} data-index={2} ref={this.textInput2}  value={cardNumber2}  name="card2" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="2" maxLength="4" />
 <input onChange={this.onChangeInputText} data-index={1} ref={this.textInput1} value={cardNumber1} name="card1" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="1" maxLength="4" />

但我收到此消息错误：

Uncaught TypeError: Cannot read property 'current' of undefined

我可以用if语句解决问题：

  if (e.target.value.length == 4) {
   // this[`textInput${index + 1}`].current.focus()
   if(index == 1)
    this.textInput2.current.focus();
   if(index == 2)
    this.textInput3.current.focus();
   if(index == 3)
    this.textInput4.current.focus();

  }

Answer 1

if (e.target.value.length == 4) {
    this[`textInput${index + 1}`].current.focus()
 }

所以这里this[`textInput${index + 1}`]这导致未定义，如果您的索引是4和value.length也是4

所以你最终得到未定义的this[textInpu5]

或者，如果您不将索引解析为number，您将遇到类似this[textInput21]的条件或者也将是未定义的条件

Answer 2

如果你增加index，那么对于第四项，它将尝试访问this.textInput5，这不存在 - 删除+ 1：

this[`textInput${index}`].current.focus();

Answer 3

index恰好是一个字符串。你在if比较中使用它作为字符串。这是有效的，因为"1" == 1是true。但是当你试图做数学时，它实际上会导致字符串连接。 "1" + 1是11。

因此，发生错误的行评估为未定义的this.textInput11。

您可以将index转换为开头的数字，以防止混淆。像const index = parseInt(e.currentTarget.dataset.index);