Question

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

我的努力：

将自动对焦设置为true以获得焦点TextInput

将returnType设置为next，以在键盘旁边添加按钮

并将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

编辑：

如果您使用的是基于本机的库（我肯定会使用），则可以使用prop 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应该是带有不返回任何参数的参数的函数。常用方式：

<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

我发现您使用的是母语。

如果是正确的话，那么您就与现有的react-native Textinput.

不同

您可以尝试以下方法：

this.refs.LastName._textInput.focus()

OR

this.refs.LastName._root.focus()

用法可能因基于本机的版本而有所不同。

将焦点转移到下一个TextInput [错误= this2.refs.LastName.focus不是一个函数]

2 个答案: