0

在我的代码中，一个数组 contactMedium 正在响应。我必须在下拉列表中显示，在下拉列表中我必须显示“名称”，并且在选择名称时，所有值都应该填充在相应的字段中，例如“AddTitle”中的“名称”，“Address1”中的“addressLine1”这样的。我怎样才能做到这一点？

contactMedium 是一个包含多个对象的数组

 contactMedium: Array(1)
    0:
    id: "Add42"
    medium{
    addressLine1: "Address1 value"
    addressLine2: ""
    addressLine3: ""
    city: "Accra"
    country: "GH"
    landmark: ""
    postcode: "111111"
    stateOrProvince: "GHP1"
    type: "POBox"
    }
    name: "Tite1"
    role: "BranchAddress"
    type: "Address"

下面是我必须在其中填充数据的 react native 的 UI

<View style={{ padding: 15 }}>
<View style={{ marginTop: 15 }}>
    <View style={{
        flexDirection: 'row', backgroundColor: '#fff'
    }}>
        <RegularText text={`Address Title`} style={{ fontSize: hp('1.5%'), color: 'grey' }} />
    </View>
    <Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
        <Input
            value={AddTitle}
            placeholder={'Enter Address Title'}
            keyboardType='default'
            onSubmitEditing={(e) => this.onChange(AddTitle, 'AddTitle', 'submit')}
            onChangeText={(text) => { this.onChange(text, 'AddTitle', 'change') }}
        />
    </Item>
    {validation.name === 'AddTitle' && validation.value &&
        <Text style={{ color: 'red' }}>{validation.message}</Text>
    }
</View>
<View style={{ marginTop: 15 }}>
    <View style={{
        flexDirection: 'row', backgroundColor: '#fff'
    }}>
        <RegularText text={`Address Line 1`} style={{ fontSize: hp('1.5%'), color: 'grey' }} />
    </View>
    <Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
        <Input
            value={Address1}
            placeholder={'Enter Address Line 1'}
            keyboardType='default'
            onSubmitEditing={(text) => this.onChange(Address1, 'Address1', 'submit')}
            onChangeText={(text) => { this.onChange(text, 'Address1', 'change') }}
        />
    </Item>
    {validation.name === 'Address1' && validation.value &&
        <Text style={{ color: 'red' }}>{validation.message}</Text>
    }
</View>

<View style={{ marginTop: 15 }}>
    <SelectField
        label="Country"
        options={Country}
        value={SelectedCountry}
        node="Gender"
        onChange={(key, value) => this.onPickerChange(value, 'Country')}
        that={this}
        setIcon={true}
        textColor='#4A494A'
    />
</View>
<View style={{ width: '100%', height: '.2%', backgroundColor: 'black' }}></View>
<View style={{ marginTop: 15 }}>
    <SelectField
        label="Region"
        options={Region}
        value={SelectedRegion}
        node="Gender"
        onChange={(key, value) => this.onPickerChange(value, 'Region')}
        that={this}
        setIcon={true}
        textColor='#4A494A'
    />
</View>
4

1 回答 1

1

Consider you have a method onSelectName which gets fired when clicked on the name in your dropdown, then your flow will be like below

 onSelectName = (selectedName) => {
  // find the selected name from the list of name 

  const selectedMedium = contactMedium.find((medium) => medium.name === selectedName); 

  // now extract the fields you require from the selectedMedium

  const { medium: { addressLine1 = '', addressLine2 = ''  } }  = selectedMedium;

  // now update the state with this extracted values 

  this.setState({
    addressLine1,
    addressLine2
  })

}
于 2021-08-26T10:58:41.003 回答