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" == 1
是true
。但是当你试图做数学时,它实际上会导致字符串连接。 "1" + 1
是11
。
因此,发生错误的行评估为未定义的this.textInput11
。
您可以将index
转换为开头的数字,以防止混淆。像const index = parseInt(e.currentTarget.dataset.index);
以上是关于TypeError:无法读取未定义焦点的属性“当前”的主要内容,如果未能解决你的问题,请参考以下文章
TypeError:无法读取未定义的属性“当前”(使用 React.js)
测试套件无法运行 TypeError:无法读取未定义的属性“默认”
如何使用自定义错误消息捕获“TypeError:无法读取未定义的属性(读取'0')”?