Multi step form in react native using react hook but dropdown doesnt set its value during Previous-Next click - Stack Overflow

admin管理员组

文章数量:1344922

I am creating a 2 step form with 2 dependent dropdowns (react-native-element-dropdown) on Step 2, the values from dropdown are saving properly on submit click, but when I click on 'Go Back' button to go to Step1 ,then again I move to Step 2 , the previously selected category is not set in dropdown. Like if on Step 2, I selected 'Civil work' from dropdown, then it should be automatically set to 'Civil work' when I move to Step2 from Step1. The states are maintained properly, I can see them through console.log

I tried setting it using different State variable but it doesn't set on dropdown

//CODE

import React, { useEffect, useState } from "react";
import { Text, View, StyleSheet } from "react-native";
 

import { useForm, Controller } from "react-hook-form";
import { WizardStore } from '../../resource/store/StateStore'

import { Button, MD3Colors, ProgressBar, TextInput } from "react-native-paper";
import { useIsFocused } from "@react-navigation/native"; 
import AntDesign from "react-native-vector-icons/AntDesign";
import { Dropdown } from 'react-native-element-dropdown';
import axios from "axios"; 

const ComplaintCategory = ({navigation}) => {
  const [isFocus, setIsFocus] = useState(false);
  
  const dataCategory = [ ];
  const dataArea = [ ]; 
  const [selectedCategory,setSelectedCategory] = useState("");//WizardStore.getRawState().cm_category;

  // keep back arrow from showing
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => null,
    });
  }, [navigation]);

  const isFocused = useIsFocused();

  const {
    handleSubmit,
    control,
    setValue,
    formState: { errors },
  } = useForm({ defaultValues: WizardStore.useState((s) => s) });

  bindCategory();


  function bindArea(category){
    
 // code to populate dataArea -- working fine
  }
  function bindCategory() {
     // code to populate dataCategory -- working fine
       console.log("category bound");
       console.log("Category bound "+selectedCategory);
  }

  


  useEffect(() => {
    isFocused &&
      WizardStore.update((s) => {
        s.progress = 33;
      });

    console.log("updated state...", WizardStore.getRawState().progress);

    //
    console.log("Area "+WizardStore.getRawState().cm_area);
    console.log("Category "+WizardStore.getRawState().cm_category);
    
    console.log("Category check b4 ");

    setSelectedCategory(WizardStore.getRawState().cm_category);

    console.log("Category1 "+selectedCategory);

  }, [isFocused]);

  const onSubmit = (data) => {
    WizardStore.update((s) => {
      s.progress = 66; 
      s.cm_category=data.cm_category;
      s.cm_area =data.cm_area;
      s.cm_community=data.cm_community;
      s.cm_remarks=data.cm_remarks;
    });
    console.log(data);
  };
  
  return ( 
    <View style={styles.container}>
          <ProgressBar
            style={styles.progressBar}
            progress={WizardStore.getRawState().progress}
            color={MD3Colors.primary60}
          />
        <View style={{ paddingHorizontal: 16 }}>


          <View  style={styles.formEntry}>
            **<Text> {selectedCategory}</Text>**

          <Controller
            name="cm_category"
            control={control}
            render={({field: { onChange, onBlur  }}) => {
              return (
                <Dropdown
                  style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
                  placeholderStyle={styles.placeholderStyle}
                  selectedTextStyle={styles.selectedTextStyle}
                  inputSearchStyle={styles.inputSearchStyle}
                  iconStyle={styles.iconStyle}
                  data={dataCategory}
                  search
                  maxHeight={300}
                  labelField="label"
                  valueField="value"
                  placeholder={!isFocus ? 'Select Category' : '...'}
                  searchPlaceholder="Search..."
                  value={selectedCategory}
                  onBlur={onBlur}
                  onChange={item => {
                    onChange(item.value);
                    bindArea(item.value);
                    setSelectedCategory(item.value);
                    setValue("dataCategory",item.value);
                    console.log("changed" + item.value);
                  } }
                  renderLeftIcon={() => (
                    <AntDesign
                      style={styles.icon}
                      color={isFocus ? 'blue' : 'black'}
                      name="Safety"
                      size={20} />
                  )} />

              );
            }}
          rules={{ required: true }}
        />
          </View>

          <View  style={styles.formEntry}>
          
                <Controller
                name="cm_area"
                control={control}
                render={({field: { onChange, value, onBlur, ref }}) => {
                  return (
                    <Dropdown
                      style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
                      placeholderStyle={styles.placeholderStyle}
                      selectedTextStyle={styles.selectedTextStyle}
                      inputSearchStyle={styles.inputSearchStyle}
                      iconStyle={styles.iconStyle}
                      data={dataArea}
                      search
                      maxHeight={300}
                      labelField="label"
                      valueField="value"
                      placeholder={!isFocus ? 'Select Area' : '...'}
                      searchPlaceholder="Search..."
                      value={value}
                      onBlur={onBlur}
                      onChange={item => {
                        onChange(item.value);
                        console.log("changed" + item.value);
                      } }
                      renderLeftIcon={() => (
                        <AntDesign
                          style={styles.icon}
                          color={isFocus ? 'blue' : 'black'}
                          name="Safety"
                          size={20} />
                      )} />
    
                  );
                }}
              rules={{ required: true }}
            />
              
            {errors.cm_area && 
             <Text style={{ margin: 8, marginLeft: 16, color: "red" }}>
                          This is a required field.
                        </Text>
            }
            </View>
            <View  style={styles.formEntry}>
             
            <Controller
              control={control}
              name="cm_community"
              rules={{ required: true }}
              render={({ field: { onChange, value } }) => (
                <TextInput      
                mode="outlined"
                label="Community"            
                  onChangeText={onChange}
                  value={value}
                />
              )}
            />
            {errors.cm_community && 
             <Text style={{ margin: 8, marginLeft: 16, color: "red" }}>
                          This is a required field.
                        </Text>
            }
            </View>

            <View  style={styles.formEntry}>
             
             <Controller
               control={control}
               name="cm_remarks"
               rules={{ required: true }}
               render={({ field: { onChange, value } }) => (
                 <TextInput      
                 mode="outlined"
                 label="Remarks"            
                   onChangeText={onChange}
                   value={value}
                 />
               )}
             />
             {errors.cm_remarks
              && 
              <Text style={{ margin: 8, marginLeft: 16, color: "red" }}>
                           This is a required field.
                         </Text>
             }
             </View>
             <View  style={styles.formEntry}>
             <Button
          mode="outlined"
          style={[styles.button, { marginTop: 40 }]}
          onPress={() => navigation.goBack()}
        >
          GO BACK
        </Button>
        </View>

          <View  style={styles.formEntry}>
            <Button  onPress={handleSubmit(onSubmit)}  mode="outlined"
          style={styles.button}>Submit</Button>
          </View>

    </View>
    </View>

  )
}

export default ComplaintCategory

I have displayed the value of {selectedCategory} and it is showing correct value, I tried using the 'value' field of controller but that too doesnt work with dropdowns. Please help

本文标签：