web-dev-qa-db-ja.com

ネイティブベース入力参照が設定されていない

そのため、ネイティブベースの<Input>タグを使用して、フォームフィールドを介した「タブ」を処理するように参照を設定しようとしています。私は次のコードを持っています：

<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>要素を使用してみました。これは上記のように設定参照を処理しますが、送信後にフォーカスを処理しないようです（.focus()から._rootを削除した場合でも）論理）。

他の誰かがこの問題を見たことがありますか？

注：現在、iOSでのみテストされています。

javascriptreact-nativereferencenative-base
4
Tim Lewis

NativeBaseの入力コンポーネントには、getRefpropを使用する必要があります。

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

受け入れられた回答の更新：refとgetRefはどちらも機能しますが、ラッピングコンポーネントに応じて機能するのは1つだけです。この場合、私の<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は機能しません。

理由を説明するためではありませんが、この警告は将来誰かを助けるかもしれません。

10
Tim Lewis