本机基本输入参考未设置

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>标签,都有refset(this.firstNameRef和this.lastNameRef),但在加载App时,按First Name,然后在键盘上按"next"我收到以下错误:

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

看来,使用<Input>实际上不设置任何参考价值,所以this.lastNameRef是null.

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

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

注意:目前仅在iOS中测试过.

Answer 1

以接受的答案更新:ref和getRef两个工作,但只一会的工夫depeneding包装组件上.在这种情况下,我的<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的输入组件，您需要使用getRefprop：

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