reactjs 如何在React Native的文本输入字段中使用useRef挂接

8aqjt8rx  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(118)

以下React代码的React Native等价物是什么?代码使用useRef钩子来获取表单中用户输入的值,然后在API调用中使用该输入。常规React代码在浏览器中工作得很好。React Native代码alert(name.current.value)}未定义。我想我在React Native文本输入和useRef钩子语法方面遇到了问题。
这是React代码:

import React, { useRef } from 'react'
import { doc, setDoc } from 'firebase/firestore'
import { db } from './firebase'

export default function AddNew({ path }) {
  const name = useRef()
  async function handleSubmit(e) {
    e.preventDefault()

    // API calls

    const docRef = doc(db, path, name.current.value)
    await setDoc(docRef, { name: name.current.value })
    console.log(name.current.value)

    e.target.reset()
  }

  return (
    <li>
      <form onSubmit={handleSubmit}>
        <input ref={name} />
        <button type='submit'>Add</button>
      </form>
    </li>
  )
}

这就是我在React Native上尝试的:

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

import { doc, setDoc } from '@firebase/firestore'
import { db } from '../firebase'

export default function ({ path }) {
  const name = useRef(null)

  async function handleSubmit() {
    // API calls
    const docRef = doc(db, path, name.current.value)
    await setDoc(docRef, { name: name.current.value })

  }

  return (
    <View>
      <TextInput
        style={AppStyles.textInputAddCatStats}
        placeholder='Enter cat name'
        ref={name}
        onSubmitEditing={() => alert(name.current.value)}
      />
      <TouchableOpacity onPress={handleSubmit}>
        <Text>Submit</Text>
      </TouchableOpacity>
    </View>
  )
}

alert(name.current.value)}未定义是react本机代码。
谢谢你的帮助

wkyowqbh

wkyowqbh1#

value在本机中不可用,如果由于某种原因state无法使用,则可以像这样伪造它。

<TextInput
...
  ref={name}
  onChangeText={(e) => name.current.value = e}
  onSubmitEditing={() => console.log(name.current.value)}
/>

相关问题