时间戳

首页 > 解决方案 > 如何从单个变量中的所有文本字段中获取数据

reactjs - 如何从单个变量中的所有文本字段中获取数据

问题描述

我有一个屏幕IndividualDetails.js呈现IndividualInfoCard在 for 循环中调用的组件：

let indCards = [];
for (let index = 0; index < totalIndividuals; index++) {
  indCards.push(<IndividualInfoCard noOfInd={index + 1} key={index} />);
}

IndividualInfoCard组件是：

    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [passportNRIC, setPassportNRIC] = useState('')
    const [phoneNumber, setPhoneNumber] = useState('')
    const [dob, setDOB] = useState('')

    var noOfIndSelected = noOfInd;

    const individualDetails = {
        fullName: name,
        email: email,
        phone: phoneNumber,
        passportNRIC: passportNRIC,
        dob: dob
    }

return (
  <View style={styles.container}>
    <Text style={styles.title}>Individual {noOfIndSelected}</Text>
            <TextInput placeholder={'Enter Full Name *'} value={name} onChangeText={setName} style={styles.textField} editable={true} />
            <TextInput placeholder={'Enter Email *'} value={email} onChangeText={setEmail} style={styles.textField} editable={true} />
            <TextInput placeholder={'Enter Passport or NRIC Number *'} value={passportNRIC} onChangeText={setPassportNRIC} style={styles.textField} editable={true} />
            <TextInput placeholder={'Phone Number *'} value={phoneNumber} onChangeText={setPhoneNumber} style={styles.textField} editable={true} />
            <TextInput placeholder={'Date of Birth *'} value={dob} onChangeText={setDOB} style={styles.textField} editable={true} />
  </View>
);

如果假设个人是三个IndividualInfoCard，那么屏幕上将包含三个组件。

现在在屏幕上，IndividualDetails.js我需要从三张卡片中获取所有这些数据，比如一个数组[{ind: 1, fullname: 'Person'...}]

为此，我在此屏幕上有一个按钮，我在其中使用了forEach这样的循环：

<MainActionButton title={'Continue'} pressEvent={() => {
    indCards.forEach(indiv => {
       alert(HOW_TO_GET_SAY_EMAIL_HERE)
    });
}} />

标签： reactjsreact-native

解决方案

您可以使用 useState 处理它

做这个：

import {useState} from 'react'

const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [phoneNumber, setPhoneNumber] = useState('')
// other inputs if you want more

const individualDetails = {
    fullName: name,
    email,
    phoneNumber,
    // and the other inputs if you want
}

return (
    <View>
        <Text style={styles.title}>Individual {noOfIndSelected}</Text>
        <TextInput placeholder="Enter Full Name" value={name} onChangeText={setName} />
        <TextInput placeholder="Enter Email" value={email} onChangeText={setEmail} />
        <TextInput placeholder="Enter Phone Number" value={phoneNumber} onChangeText={setPhoneNumber} />
    </View>
)

individualDetails const 是您想要的，在您想要的任何屏幕中使用此代码。

也为了防止使用很多状态，你可以使用formik。

推荐阅读