未设置本机基本输入参考

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），但是在加载应用程序时，按名字，然后按键盘上的“下一步”我得到以下错误：

无法读取未定义的属性“_root”
onSubmitEditing
Signup.js:162:26

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

我还尝试使用 React Native 的 <TextInput> 元素，它确实可以处理如上所述的设置 refs，但在提交后似乎仍然无法处理焦点（即使从 .focus() 逻辑中删除 ._root 也是如此）。

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

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

Answer 1

对已接受答案的更新：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 无效。

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

Answer 2

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

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