web-dev-qa-db-ja.com

Reactネイティブ-関数コンポーネントに関するuseRef警告

送信に適切なフォーカスを設定するために入力参照を使用する必要がある単純な関数コンポーネントがあります。

import React, { useRef } from 'react'
import { View, TextInput } from 'react-native'

export default function Login() {
  let usernameRef = useRef(null)
  let passwordRef = useRef(null)

  return (
    <View>
      <TextInput ref={usernameRef} />
      <TextInput ref={passwordRef} />
    </View>
  )
}

問題は、新しいHooks APIでrefを使用しても警告が表示されることです。

警告：関数コンポーネントに参照を与えることはできません。この参照へのアクセスは失敗します。 React.forwardRef（）を使用するつもりでしたか？

クラスを使いたくありません。 「forwardRef」を使用してみましたが、まだ警告があります：

import React, { createRef, forwardRef } from 'react'
import { View, TextInput } from 'react-native'

export default function Login() {
  let usernameRef = createRef()
  let passwordRef = createRef()
  const Input = forwardRef((props, ref) => (
    <TextInput ref={ref} {...props} />
  ))

  return (
    <View>
      <Input ref={usernameRef} />
      <Input ref={passwordRef} />
    </View>
  )
}

私は何を間違っていますか？

reactjsreact-nativereact-hooks
7
Alexandre Thebaldi

残念ながら、これはReact Native（ link to Github issue） ）ではまだサポートされていないようです。これは2018年で、2019年5月までに、まだ同じケース。

最新バージョンを実行していない場合は、React Nativeの最新バージョンを試してみて、だれかがそれを確認できるかどうかを確認します。

1
Yuan-Hao Chiang