Question

我想从下拉列表中选择一个项目，并希望将staffId的状态设置为该状态。我想使用下拉菜单显示名称，但是选择名称后，将Staffid设置为state。我还希望在不对if-else循环中的值进行硬编码的情况下实现此目标，因为我有成千上万的数据需要处理。

这是从WebAPI获取的数据，并存储在称为项的状态中

this.setState({
    items: dataSource
  staffId: ''
})

此项目的状态将是这样。

[
    {"departmentName":"HOUSE","employeeName":"TEST1", "staffId" : "00001"},
    {"departmentName":"HOUSE","employeeName":"TEST2", "staffId" : "00002"},
    {"departmentName":"HOUSE","employeeName":"TEST3", "staffId" : "00003"}
]

我仅使用emplyeeName在react native中创建了一个下拉列表。我正在为库使用react-native-material-dropdown。我想显示employeeName，但是当用户选择一个姓名时，获取一个ID代替

let staff = this.state.listOfEmployees.map(item => ({
        value: item.employeeName
        staffId: item.staffId
      }));

<Dropdown
    label='Staff Name'
    baseColor='#0079b5'
    data={staff}
    selectedValue={value}
    onChangeText={(staffId) => this.onChangeName(staffId)}
/>

在此功能中，我想将staffId的状态设置为所选值的staffId。

onChangeName = (staffId) => {
    //set the state of staffId to the staffId of the selected value.
    //For Example, if AUNG THU 1 is selected, the state of staffId is '00001'.
    this.setState({
       staffId: staffId
    })
}

Answer 1

您可以使用valueExtractor和labelExtractor道具来做到这一点。应该看起来像这样：

<Dropdown
  label='Staff Name'
  baseColor='#0079b5'
  data={staff}
  selectedValue={value}
  valueExtractor={({ staffId }) => staffId}
  labelExtractor={({ employeeName }) => employeeName}
  onChangeText={(staffId) => this.onChangeName(staffId)}
/>

从对象数组中获取2个值

1 个答案: