时间戳

首页 > 解决方案 > React Native - 如何循环一个组件中的多个渲染元素？

react-native - React Native - 如何循环一个组件中的多个渲染元素？

问题描述

我需要遍历组件中呈现的多个 Input 元素并验证它们是否为空。据我所知，React Native 中没有“Document.getElementsByClass”，所以我不知道如何获取它们，请参见下面的代码......

const CreateAccountFormA = props => {

verifyFormIsCompleted = props => {

}


return (
    <Layout style={styles.mainContainer}>
        <Layout style={styles.inputsContainer}>
            <Input
            placeholder="Company"
            ></Input>
            <Input
            placeholder="First Name"
            ></Input>
            <Input
            placeholder="Last Name"
            ></Input>
            <Input
            placeholder="Address"
            ></Input>
            <Layout style={styles.parent}>
                <Input 
                style={styles.child}
                placeholder="City"
                ></Input>
                <Input
                style={{...styles.child, ...styles.centerChild}}
                placeholder="State"
                ></Input>
                <Input
                style={styles.child}
                placeholder="Zip"
                ></Input>
            </Layout>
        </Layout>
        <Layout style={styles.btnContainer}>
            <Button 
            onPress={verifyFormIsCompleted}
            >NEXT
          </Button>
        </Layout>
    </Layout>
)

}

任何帮助将不胜感激，谢谢！

标签： react-native

解决方案

有两种方法可以做到这一点，愚蠢的方式和正确的 React 方式。正如你所说，在 React Native 中并不完全是 a Document.getElementsByClass，但是有 refs 。使用您的代码，您可以执行

<Input placeholder="Last Name" ref={(ref)=>{this.lastNameInput = ref)}></Input>

您可以将所有 ref 存储在一个数组中，或者通过所有这些循环查看 ref.value。

现在，“正确”的 React 方式是使用状态。在您的构造函数中声明this.state={lastName: ""}，然后将onChangeText道具添加到您的输入。

<Input placeholder="Last Name" onChangeText={(lastName)=>{this.setState({lastName}}}></Input>

每当您的用户现在更改该 Input 中的值时，this.state.lastName也会更改。然后，您所要做的就是遍历您的状态，例如通过做

for(var field of this.state.keys()){
    if(this.state[field] === ""){
        //failed to validate
    }
}

推荐阅读