Question

我无法将重点放在下一个浮动标签TextInput上。我的代码示例在此处。我收到错误消息undefined is not a function(evaluating this.refs.LastName.focus())。有没有人遇到这个问题？请帮助我，谢谢。

<Item floatingLabel style={styles4.floatinglbl}>
<Label style={styles4.LblTxt}>First Name</Label>
<Input editable={true}
       value = {this.state.FirstName}
       returnKeyType={'next'}
       autoFocus={true}
       onChangeText={this.onFirstNameEditHandle}
       style={styles4.LblInpTxt}
       autoCapitalize={true}
       onSubmitEditing={(event) => {
         this.refs.LastName.focus();
       }}
/>
</Item>

<Item floatingLabel style={styles4.floatinglbl}>
    <Label style={styles4.LblTxt}>Last Name</Label>
    <Input editable={true}
     value={this.state.LastName}
     ref={'Lastname'}
     returnKeyType={'next'}
     onChangeText={this.onLastNameEditHandle}
     style={styles4.LblInpTxt}
     autoCapitalize={true}
    />
</Item>

Answer 1

这该死的差点把我撞倒了。在尝试找出如何将光标从一个框移动到另一个框的30分钟后，我终于整理了一下。如果有人不幸以某种方式与我处于同一位置（想要将焦点从一个文本输入移到另一个文本上...），显然这是一种方法。我在任何文档或任何文档中都没有看到这一点，我认为这很大程度上只是关于NativeBase的工作方式的一个怪癖。您无法引用ref。您必须引用ref.wrappedInstance。我假设他们的Input包装TextInput是为了做诸如floatLabel之类的技巧。

        <Form>
          <Item floatingLabel>
            <Label>Username</Label>
            <Input
              autoCapitalize="none"
              autoCorrect={false}
              spellCheck={false}
              underlineColorAndroid="transparent"
              onChangeText={username => this.setState({ username })}
              value={username}
              blurOnSubmit={false}
              returnKeyType="next"
              onSubmitEditing={() => { this.passwordInput.focus() }}
            />
          </Item>
          <Item floatingLabel>
            <Label>Password</Label>
            <Input
              getRef={ref => {
                this.passwordInput = ref.wrappedInstance // <-- notice
              }}
              autoCapitalize="none"
              underlineColorAndroid="transparent"
              secureTextEntry={true}
              onChangeText={password => this.setState({ password })}
              onSubmitEditing={() => { this.submit() }}
              value={password}
            />
          </Item>
        </Form>

Answer 2

refs被this._textInput和this._root使用。因此，您可以使用

this.refs.Lastname._root.focus()

Answer 3

请参阅FloatingLabel https://docs.nativebase.io/Components.html#floating-label-headref

的文档

在文档中提到，

在使用floatLabel时，请使用 getRef 来获取零件。始终将floatLabel组件包装在 expect(@item).to receive(:interpret_json_file).with(@item.data_file) { file_contents } expect(@item).to receive(:save) { true } 中。

Answer 4

尝试：

<Item floatingLabel>
  <Label>First Name</Label>
  <Input
    getRef={input => {
      this.firstNameRef = input;
    }}
    onSubmitEditing={() => {
      this.lastNameRef._root.focus();
    }}
    returnKeyType={"next"}
  />
</Item>

和

<Item fixedLabel>
  <Label>First Name</Label>
  <Input
    ref={input => {
      this.lastNameRef = input;
    }}
    onSubmitEditing={() => {
      this.lastNameRef._root.focus();
    }}
    returnKeyType={"next"}
  />
</Item>

在React native中，focus（）在本地浮动标签textInput上不起作用

4 个答案: