以下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本机代码。
谢谢你的帮助
1条答案
按热度按时间wkyowqbh1#
value
在本机中不可用,如果由于某种原因state
无法使用,则可以像这样伪造它。