Question

因此，我正在使用Native Base <Input>标记，尝试设置ref以处理通过表单字段进行的“制表”。我有以下代码：

<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>元素，该元素确实如上所述处理设置引用，但是提交后似乎仍然无法处理焦点（即使从{{1}中删除._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;
  }}
/>

未设置本机基本输入参考

2 个答案: