时间戳

首页 > 解决方案 > 未设置本机基本输入参考

javascript - 未设置本机基本输入参考

问题描述

所以我正在使用 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>标签，都带有refset (this.firstNameRef和this.lastNameRef)，但是在加载应用程序时，按 First Name，然后按键盘上的“next”，我收到以下错误：

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

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

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

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

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

标签： javascriptreact-nativereferencenative-base

解决方案

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

并不是真的要解释为什么，但也许这个警告会在未来帮助其他人。

推荐阅读