未设置本机基本输入引用

Question

所以我正在使用 Native Base <Input> 标签，试图设置 refs 以通过表单字段处理 "tabbing"。我有以下代码：

<Item floatingLabel>
  <Label style={{ color: "#fff" }}>First Name</Label>
  <Input
    ref={input => {
      this.firstNameRef = input;
    }}
    onSubmitEditing={() => {
      this.lastNameRef._root.focus();
    }}
    returnKeyType={"next"}
  />
</Item>

<Item floatingLabel last>
  <Label style={{ color: "#fff" }}>Last Name</Label>
  <Input
    ref={input => {
      this.lastNameRef = input;
    }}
  />
</Item>

所以基本上，我有 2 个 <Input> 标签，都设置了 ref（this.firstNameRef 和 this.lastNameRef），但是在加载应用程序时，按名字，然后按键盘上的 "next" 我得到以下错误：

Cannot read property '_root' of undefined
onSubmitEditing
Signup.js:162:26

似乎使用<Input>实际上并没有设置任何ref值，所以this.lastNameRef是null。

我也尝试过使用 React Native 的 <TextInput> 元素，它确实如上所述处理设置 refs，但在提交后似乎仍然没有处理焦点（即使从 [= 中删除 ._root 21=]逻辑）。

还有其他人看到过这个问题吗？

注意：目前仅在 iOS 中测试过。

Answer 1

对于 nativeBase 的输入组件，您需要使用 getRef 属性：

<Input
  getRef={input => {
    this.lastNameRef = input;
  }}
/>

Answer 2

已接受答案的更新：ref 和 getRef 都有效，但只有一个有效，具体取决于包装组件。在这种情况下，我的 <Input> 组件由 <Item> 组件包装，每个组件具有不同的 label 属性。比较：

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

在 floatingLabel 的情况下，getRef 有效，而 ref 无效。另一方面，在 fixedLabel 的情况下，ref 有效，而 getRef 无效。

不是真的要解释原因，但也许这个警告将来会对其他人有所帮助。

未设置本机基本输入引用

Native Base Input Refs Not Being Set

javascript

reference

react-native

native-base