Как обновить динамически создаваемое значение Picker в реагировать на родной - PullRequest
Новая
       13

Как обновить динамически создаваемое значение Picker в реагировать на родной

0 голосов
/ 29 марта 2019

У меня проблема при обновлении выбора значения в динамически создаваемом значении Пикера.При рендеринге Picker значение изменяется в переменной, но не изменяется в метке, оно всегда показывает первое значение при выборе любого значения из пикара.Пожалуйста, проверьте ниже написанный код, это функция для создания массива компонентов 

abcFuntion() {
   try {
     this.state.customFields.forEach(function (customFields) {
        if((customFields.DataType.trim())=="TXT"){
          productList.push(
            <View  key={customFields.FieldInfoId}>
            <TextInput
            placeholder={customFields.DisplayName}
            type="text"
            onChangeText={FirstName =>
              this.setState({
                FirstName
              })
            }
           // value={this.state.FirstName}
            ref={ input => {

            this.inputs[customFields.DisplayName] = input;
             }}
             onSubmitEditing={() => {
                dynammicValues.push({
                    FieldId:  customFields.FieldInfoId,
                    FiledData: this.state.FirstName})
          }}
            returnKeyType={ "next" }
            />
             </View> 
        );
        } else if((customFields.DataType.trim())=="NUM"){
          productList.push(
            <View key={customFields.FieldInfoId}>
            <TextInput
            placeholder={customFields.DisplayName}
            keyboardType="numeric"
            ref={ input => {
               // dynammicValues.push(customFields.FieldInfoId,input)
            this.inputs[customFields.DisplayName] = input;
             }}
             onChangeText={FirstName =>
              this.setState({
                FirstName
              })
            }
            onSubmitEditing={() => {
                dynammicValues.push({
                    FieldId:  customFields.FieldInfoId,
                    FiledData: this.state.FirstName})
          }}
            returnKeyType={ "next" }
            />
             </View> 
        );
        }else if((customFields.DataType.trim())=="DAT"){
        productList.push(
        <View style={{flexDirection: "row", flex:2}} key={customFields.FieldInfoId}>
        <View>
        <Text  style={{width: 50, height: 44, marginTop:25, flex:1, color: "#000000",fontStyle:'normal' }}>
        {this.state.DateText}</Text>
        </View>
       <TouchableOpacity onPress={this.DatePickerMainFunctionCall.bind(this)} >
        <Image
         style={{width: 50, height: 44,justifyContent:'center', marginTop:10, flex:2 }}
         source={require("../asset/ic_calendar.png")} />
        </TouchableOpacity>
        <DatePickerDialog onDatePicked={this.setState({dateValueId:customFields.FieldInfoId},this.onDatePickedFunction.bind(this))} />
        </View>
        // </View>
        );
        }
        else if((customFields.DataType.trim())=="DDL"){
          // onChange={this.handleChange.bind(this, i)

           myArray  = customFields.DDLValues.split(',');
           productList.push(
            //<View key={customFields.FieldInfoId}>
            <View style={style.MainContainer} key={customFields.FieldInfoId}>
            <Text style={{fontSize: 16,
            textAlign: "left",
            color: "#1E88E5",
            fontWeight: 'bold'}}>{customFields.DisplayName}</Text>
            <View style={stylesnew.onePicker}>
            <Picker
             selectedValue={this.state.temp}
                  onValueChange={
                    (value, itemIndex) => 
                    {this.handleChange.bind(this, value)
                    // (value, itemIndex) => this.setState({
                    //     temp:value
                    // },this.setPickerData(customFields.FieldInfoId,value))
                   // selectedValue={temp}
                    }
                  }
                    >
                  {myArray.map((item, index) => {
                   return (<Picker.Item label={item} value={item} key={index}/>) 
                   })}
              </Picker>

            </View>
            <Text>{temp}</Text>
            </View>
            //</View>
          )
          productListDDL.push(
            //<View key={customFields.FieldInfoId}>
            <View style={style.MainContainer} key={customFields.FieldInfoId}>
            <Text style={{fontSize: 16,
            textAlign: "left",
            color: "#1E88E5",
            fontWeight: 'bold'}}>{customFields.DisplayName}</Text>
            <View style={stylesnew.onePicker}>
            <Picker
                  onValueChange={
                    (value, itemIndex) => 
                    this.handleChange.bind(this, value)
                    // this.setState({
                    //     temp:value
                    // },this.setPickerData(customFields.FieldInfoId,value))
                    }
                    selectedValue={temp}
                    >
                  {myArray.map((item, index) => {
                   return (<Picker.Item label={item} value={item} key={index}/>) 
                   })}
              </Picker>
            </View>
            </View>
            //</View>
          )
      }
      }.bind(this));
    } catch (error) {
     console.log("Ex"+error)
    }
   }

и метод рендеринга для динамических представлений 

 <View style={{justifyContent: "center",
        flex: 1}}>
 {this.state.isSelected==true ? (
              <View>
            <View>
            <Text style={{ fontSize: 16, marginTop:5,
            textAlign: "left",
            color: "#1E88E5",
            fontWeight: 'bold'}}>Select Status</Text>

            <View style={Styles.dropDown} key='2'>
            <Picker
                  onValueChange={
                     (value, itemIndex) => this.setState({PickerValueStatus:value},this.gettingStatusPickerData(value,itemIndex))

                    }
                    selectedValue={ this.state.PickerValueStatus}
                  >
                  { statusdata.map((item, key)=>(
                  <Picker.Item label={item.StatusName} value={item.StatusName} key={item.StatusId}    
                  />)
                  )}
              </Picker>

            </View>
            </View>
            </View>
            ) : (
             null
            )}

           {/* Dynamic Layout*/}
            {this.state.customFields.length >0 ? (
              <View>
              {productList}
              </View>
            ) : (
             null
            )}

            {this.state.customFields.length >0 ? (
              <View>
              {productListDDL}
              </View>
            ) : (
             null
            )}
</View>
...