如何解决为不同的输入反应原生动态输入形式相同的值
我刚刚开始使用 React Native 学习 JS,我想使用 firebase firestore 构建一个应用程序。
但是我遇到了一个问题——当用户想要上传帖子时,他应该能够上传他的名字、他的头衔、他的年龄和他的队友(他的队友应该是嵌套对象并且应该有:姓名、 Title,Age) - 用户应该能够为每个新队友添加动态输入字段,这些字段应该将数据添加到 firestore(每个队友应该包含在索引从 0 开始的对象/地图中,并且在里面他们应该为每个队友输入姓名、职位和年龄)。
我设法解决了所有这些问题,除了一个。我找到了如何从一些 tuts 在线添加动态输入并设法将其连接到 firebase。但只有一个属性(比如名称)而不是其他属性。
当我尝试为用户添加不同的输入(每个新队友的头衔/年龄)时,他们会自动完成第一个输入的信息。我知道这对我来说是一个错误,因为我并不真正了解这些功能是如何工作的,以及由于我的专业知识水平较低,如何使它们适应我的需求。
如果你能帮忙就好了。谢谢。
*附件是来自用户界面的图像,简单的(只有姓名,已经可以使用)和我想要工作的图像,还附上了仅姓名队友字段的代码和我创建的那个对于不同的输入(请记住,我知道这是完全错误的)。
图片: user ui with only teammates name-working
user ui with teammates name,title and age - title and age input are name - not working properly
import React,{useEffect,useState} from 'react';
import { View,Text,Button,TextInput,TouchableOpacity,StyleSheet,ScrollView }
from 'react-native'
import firebase from 'firebase';
import { user } from '../../redux/reducers/user';
require("firebase/firestore") ;
require("firebase/firebase-storage") ;
export default function Save(props,{navigation}) {
const [age,setAge] = useState("");
const [name,setName] = useState("");
const [title,setTitle] = useState("");
const [teammateName,setTeammateName] = useState([{key: '',name: ''}]);
const savePostData = () => {
firebase.firestore()
.collection('posts')
.doc(firebase.auth().currentUser.uid)
.collection("userPosts")
.add({
teammateName,age,name,title,createdAt: firebase.firestore.FieldValue.serverTimestamp()
}).then((function () {
props.navigation.popToTop()
}))
}
const addHandler = ()=>{
const _teammateName = [...teammateName];
_teammateName.push({key: '',name: ''});
setTeammateName(_teammateName);
}
const deleteHandler = (key)=>{
const _teammateName = teammateName.filter((input,index) => index != key);
setTeammateName(_teammateName);
}
const inputHandler = (text,key)=>{
const _teammateName = [...teammateName];
_teammateName[key].name = text;
_teammateName[key].key = key;
setTeammateName(_teammateName);
}
return (
<View style={styles.container}>
<TextInput
placeholder = "Age"
onChangeText = {(age) => setAge(age) }
/>
<TextInput
placeholder = "Name"
onChangeText = {(name) => setName(name) }
/>
<TextInput
placeholder = "Title"
onChangeText = {(title) => setTitle(title) }
/>
<ScrollView style={styles.inputsContainer}>
{teammateName.map((input,key)=>(
<View style={styles.inputContainer}>
<TextInput placeholder={"Enter Teammate Name"} value={input.name} onChangeText={(text)=>inputHandler(text,key)}/>
<TouchableOpacity onPress = {()=> deleteHandler(key)}>
<Text style={{color: "red",fontSize: 13}}>Delete</Text>
</TouchableOpacity>
</View>
))}
</ScrollView>
<Button title="Add" onPress={addHandler} />
<Button title="Post" onPress = {() => savePostData()} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,padding: 20,backgroundColor: 'white'
},inputsContainer: {
flex: 1,marginBottom: 20
},inputContainer: {
flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',borderBottomWidth: 1,borderBottomColor: "lightgray"
}
})
这里是用于队友(姓名、职位、年龄)的多个输入的代码,这些输入不起作用且不知道如何使其起作用。
import React,useState} from 'react';
import { View,ScrollView } from 'react-native'
import firebase from 'firebase';
import { user } from '../../redux/reducers/user';
require("firebase/firestore") ;
require("firebase/firebase-storage") ;
export default function Save(props,{navigation}) {
const [age,setAge] = useState("");
const [name,setName] = useState("");
const [title,setTitle] = useState("");
const [teammateName,name: '',title: '',age: ''}]);
const savePostData = () => {
firebase.firestore()
.collection('posts')
.doc(firebase.auth().currentUser.uid)
.collection("userPosts")
.add({
teammateName,createdAt: firebase.firestore.FieldValue.serverTimestamp()
}).then((function () {
props.navigation.popToTop()
}))
}
const addHandler = ()=>{
const _teammateName = [...teammateName];
_teammateName.push({key: '',title:'',age:''});
setTeammateName(_teammateName);
}
const deleteHandler = (key)=>{
const _teammateName = teammateName.filter((input,index) => index != key);
setTeammateName(_teammateName);
}
const inputHandler = (text,key)=>{
const _teammateName = [...teammateName];
_teammateName[key].name = text;
_teammateName[key].title = text;
_teammateName[key].age = text;
_teammateName[key].key = key;
setTeammateName(_teammateName);
}
return (
<View style={styles.container}>
<TextInput
placeholder = "Age"
onChangeText = {(age) => setAge(age) }
/>
<TextInput
placeholder = "Name"
onChangeText = {(name) => setName(name) }
/>
<TextInput
placeholder = "Title"
onChangeText = {(title) => setTitle(title) }
/>
<ScrollView style={styles.inputsContainer}>
{teammateName.map((input,key)}/>
<TextInput placeholder={"Enter Teammate Title"} value={input.title} onChangeText={(text)=>inputHandler(text,key)}/>
<TextInput placeholder={"Enter Teammate Age"} value={input.age} onChangeText={(text)=>inputHandler(text,key)}/>
<TouchableOpacity onPress = {()=> deleteHandler(key)}>
<Text style={{color: "red",fontSize: 13}}>Delete</Text>
</TouchableOpacity>
</View>
))}
</ScrollView>
<Button title="Add" onPress={addHandler} />
<Button title="Post" onPress = {() => savePostData()} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: 'white'
},marginBottom: 20
},borderBottomColor: "lightgray"
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。