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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeError:无法读取未定义焦点的属性“当前”相关的知识,希望对你有一定的参考价值。

我有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();

  }
答案
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]的条件或者也将是未定义的条件

另一答案

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

this[`textInput${index}`].current.focus();
另一答案

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

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

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

以上是关于TypeError:无法读取未定义焦点的属性“当前”的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法读取未定义的属性“当前”(使用 React.js)

测试套件无法运行 TypeError:无法读取未定义的属性“默认”

如何使用自定义错误消息捕获“TypeError:无法读取未定义的属性(读取'0')”?

TypeError:无法读取未定义的属性(读取“名称”)

TypeError:无法读取未定义的属性“findAll”(expressjs)

TypeError:无法读取未定义的属性(读取“问题”)