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);

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

3 个答案: