Перенести фокус на следующий TextInput [error = this2.refs.LastName.focus не является функцией]

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

Я вижу, что вы используете native-base .

Если все верно, то вы отличаетесь от существующего react-native Textinput.

. Вы можетепопробуйте это:

this.refs.LastName._textInput.focus()

ИЛИ

this.refs.LastName._root.focus()

Использование может варьироваться в зависимости от собственной версии.

Answer 2

EDIT:

Если вы используете нативную базовую библиотеку (в чем я уверен), вы можете установить ссылку на вход, используя 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, это должно работать.

Старее: Ссылка на проп должен быть функцией с параметром, который ничего не возвращает. Как это обычно используется:

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