Question

我需要遍历呈现在组件中的多个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>
)

}

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

Answer 1

您可以通过2种方法执行此操作，即愚蠢的方法和正确的React方法。如您所说，React Native中不完全是Document.getElementsByClass，但有引用。使用您的代码，您可以

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

您可以将所有ref存储在一个数组中，也可以将所有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
    }
}

React Native-如何在组件中循环渲染多个元素？

1 个答案: