时间戳

首页 > 解决方案 > 基于用户输入的条件渲染某些表单组件 react native + Formik

reactjs - 基于用户输入的条件渲染某些表单组件 react native + Formik

问题描述

我正在尝试为用户制作一个表格，以便在结帐时填写他们的账单信息。为此，我正在使用 Formik。我将国家和州字段作为选择器，并希望州根据国家输入动态更改。我该如何实施？如果用户选择加拿大，我希望显示各省，如果他们输入美国，我希望显示各州。我不确定我是否可以在这里使用条件渲染，因为它在 formik 的道具中并且应该动态更改：

      <Formik
        initialValues={{
          first_name: '',
          last_name: '',
          address_1: '',
          address_2: '',
          city: '',
          state: '',
          postcode: '',
          country: '',
          email: 'john.doe@example.com',
          phone: '647-274-8068',
        }}
        // Form submission action
        onSubmit={async (values) => {
          addData(values);
        }}>
        {(props) => (
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : null}
            style={{flex: 1}}>
            <ScrollView style={styles.inner}>
              <TextInput
                style={styles.input}
                placeholder="first name"
                onChangeText={props.handleChange('first_name')}
                value={props.values.first_name}
              />
              <TextInput
                style={styles.input}
                placeholder="last name"
                onChangeText={props.handleChange('last_name')}
                value={props.values.last_name}
              />
              <TextInput
                style={styles.input}
                placeholder="Street Address"
                onChangeText={props.handleChange('address_1')}
                value={props.values.address_1}
              />
              <TextInput
                style={styles.input}
                placeholder="Unit"
                onChangeText={props.handleChange('address_2')}
                value={props.values.address_2}
              />
              <TextInput
                style={styles.input}
                placeholder="City"
                onChangeText={props.handleChange('city')}
                value={props.values.city}
              />
              <Picker
                selectedValue={props.values.country}
                onValueChange={props.handleChange('country')}>
                <Picker.Item label="Canada" value="CA" />
                <Picker.Item label="USA" value="US" />
              </Picker>
              <Picker
                selectedValue={props.values.state}
                onValueChange={props.handleChange('state')}>
                <Picker.Item label="Alberta" value="AB" />
                <Picker.Item label="British Columbia" value="BC" />
                <Picker.Item label="Manitoba" value="MB" />
                <Picker.Item label="New Brunswick" value="NB" />
                <Picker.Item label="Newfoundland and Labrador" value="NL" />
                <Picker.Item label="Northwest Territories" value="NT" />
                <Picker.Item label="Nova Scotia" value="NS" />
                <Picker.Item label="Nunavut" value="NU" />
                <Picker.Item label="Ontario" value="ON" />
                <Picker.Item label="Prince Edward Island" value="PE" />
                <Picker.Item label="Quebec" value="QC" />
                <Picker.Item label="Saskatchewan" value="SK" />
                <Picker.Item label="Yukon" value="YT" />
              </Picker>
              <TextInput
                style={styles.input}
                placeholder="Postal Code"
                onChangeText={props.handleChange('postcode')}
                value={props.values.postcode}
              />
              <Button
                title="place order"
                color="maroon"
                onPress={props.handleSubmit}
              />
            </ScrollView>
          </KeyboardAvoidingView>
        )}
      </Formik>

上面的代码在我的return语句中

标签： reactjsformsreact-nativeconditional-statementsformik

解决方案

最好的方法是保持两个状态为selected_country和provinces。selected_country将是字符串类型，并且provinces是数组类型。在选择县时，您需要执行一些 CRUD 操作，您需要在其中获取数据或所选国家/地区的省份名称。一旦你这样做设置状态selected_country和provinces。如果用户选择了另一个国家，这将再次改变。这是您可以根据所选国家动态提供省份的方式。

推荐阅读