将焦点转移到下一个 TextInput [error = this2.refs.LastName.focus is not a function]

Question

我想将 TextInput 的焦点转移到下一个 TextInput 但无法成功。

我的努力：

将焦点 TextInput 的自动对焦设置为 true

将 returnType 设置为下一个以在键盘旁边添加按钮

并将 onSubmitEditing 用于调用事件[将焦点转移到下一个 TextInput]

这是我的代码

<View>
                    <Block width={width * 0.8}>
                      <Input
                        placeholder= 
                      {this.props.navigation.getParam("myJSON")}
                        style={{marginTop:20, borderRadius:30, 
                          borderWidth:3}}
                        onChangeText={FirstName => 
                        this.setState({FirstName})}

                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      returnKeyType = {"next"}

                      autoFocus = {true}

                      onSubmitEditing={(event) => { 
                      this.refs.LastName.focus(); 
                      }}
                      />
                    </Block>

                     <Block width={width * 0.8}>
                      <Input
                        ref='LastName'
                        placeholder= 
                          {this.props.navigation.getParam("myJSON1")}
                        style={{marginTop:20, borderRadius:30, 
                        borderWidth:3}}
                        onChangeText={LastName => this.setState({LastName})}
                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      />
                    </Block>

错误 ==>

_this2.refs.LastName.focus 不是函数

Answer 1

编辑：

如果您正在使用 native-base 库（我注意到这一点），您可以使用属性 getRef:

设置输入的引用

<Input getRef={(Input)=>{this.LastName=Input}} />

并通过调用函数 this.LastName._root.focus().

将焦点转移到它

你调试的代码：

<View>
  <Block width={width * 0.8}>
    <Input
      placeholder= 
    {this.props.navigation.getParam("myJSON")}
      style={{marginTop:20, borderRadius:30, 
        borderWidth:3}}
      onChangeText={FirstName => 
      this.setState({FirstName})}

      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    returnKeyType = {"next"}

    autoFocus = {true}

    onSubmitEditing={(event) => { 
      this.LastName._root.focus(); 
    }}
    />
  </Block>

  <Block width={width * 0.8}>
    <Input
      getRef={(Input)=>this.LastName=Input}
      placeholder= 
        {this.props.navigation.getParam("myJSON1")}
      style={{marginTop:20, borderRadius:30, 
      borderWidth:3}}
      onChangeText={LastName => this.setState({LastName})}
      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    />
  </Block>
</View>

如果您使用的是 Native-Base 库，这应该可以。

大一： ref prop 应该是一个带有 returns 参数的函数。常用方法：

<TextInput ref={(ref)=>this.LastName=ref} />

然后您可以使用 this.LastName.focus() 将焦点转移到它。

你调试的代码：

<View>
  <Block width={width * 0.8}>
    <Input
      placeholder= 
    {this.props.navigation.getParam("myJSON")}
      style={{marginTop:20, borderRadius:30, 
        borderWidth:3}}
      onChangeText={FirstName => 
      this.setState({FirstName})}

      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    returnKeyType = {"next"}

    autoFocus = {true}

    onSubmitEditing={(event) => { 
    this.LastName.focus(); 
    }}
    />
  </Block>

   <Block width={width * 0.8}>
    <Input
      ref={ref=>this.LastName=ref}
      placeholder= 
        {this.props.navigation.getParam("myJSON1")}
      style={{marginTop:20, borderRadius:30, 
      borderWidth:3}}
      onChangeText={LastName => this.setState({LastName})}
      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    />
  </Block>
</View>

Answer 2

我看到您正在使用 native-base。

如果那是对的，那么你和现有的不同react-native Textinput.

你可以试试这个：

this.refs.LastName._textInput.focus()

或

this.refs.LastName._root.focus()

用法可能因 native-base 版本而异。

将焦点转移到下一个 TextInput [error = this2.refs.LastName.focus is not a function]

Transfer focus to next TextInput [error = this2.refs.LastName.focus is not a function]

keyboard

react-native