如何从 React Native Picker 获取值和标签名称？

Posted 2023-02-25

【中文标题】如何从 React Native Picker 获取值和标签名称？

【英文标题】：How to get value and label name from React Native Picker?

【发布时间】：2018-06-04 03:42:02

【问题描述】：

在我的 react native 项目中，我有一个选择器，允许用户按分支过滤员工。我从我的数据库中获得了标签名称和值。 现在我可以从 picker value 中获取 branch id 并能够通过此链接按分支过滤员工 http://192.168.10.60:8888/customerfeedback/public/api/staff?pId=。

我的问题是我想更新我的 state 值以向用户显示他们选择了哪个分支，而不是显示 id。如何获取选择器标签名称并将其更新为我的状态？

这是我的代码：

    <Pickerios
     style= flex: 1 
     selectedValue=this.state.pickerSelected
     onValueChange=(value, index) => this.onPickerValueChange(value, index)
    >
    branches.map(branch =>
      return (
         <PickerIOS.Item key=branch.id label=branch.name value=branch.id/>
    );
    )
   </PickerIOS>

现在我可以获取值和索引，但我想从我的数据库中获取索引而不是数组索引。

onPickerValueChange = (value, index) => 
    this.setState(
      
        pickerSelected: value
      ,
      () => 

        console.log(value, index);

      
    );

感谢您的帮助。

【参考方案1】：

使用索引获取数组元素。

onPickerValueChange = (value, index) => 
this.setState(
  
    pickerSelected: value
  ,
  (name, index) => 

    console.log(branches[index]);

  
 );

【讨论】：

我想要数据库中的索引而不是数组中的索引，因为它不一样

你可能需要实现 redux 来发送 api 请求并将 redux 状态映射到 props 如果这是你想要的？

在项目中我还没有使用redux，因为它只是一个小项目。

你可以直接在这里调用 fetch 并设置对 state 的响应，或者实现 redux 来将你的 state 映射为一个 prop。只有这样，你才能达到你所需要的。

如果要显示分支名称，可以通过branches[index].name 获取

【参考方案2】：

我现在终于可以解决问题了。我知道这不是一个好的解决方案，但至少它可以达到我现在想要的效果:)

constructor(props) 
  super(props);
  pickerSelected: '',
  defaultSelected: 'Select branch's name',

这里是我如何更新我的状态

onPickerValueChange = (value) => 
    const  branches  = this.state;
    let branchName = branches.find(branch => branch.id === value);
    this.setState(
      
        pickerSelected: value,
        defaultSelected: branchName.name
      
    );

希望这可以帮助遇到同样问题的其他人:)

【参考方案3】：

您是否尝试通过将值设为对象来做类似的事情？？

看起来像这样的东西：

    <PickerIOS
     style= flex: 1 
     selectedValue=this.state.pickerSelected
     onValueChange=(value, index) => this.onPickerValueChange(value, index)
    >
    branches.map(branch =>
      return (
         <PickerIOS.Item key=branch.id label=branch.name value=id: branch.id, name: branch.name/>
    );
    )
   </PickerIOS>

然后用类似的东西访问它：

this.setState(
      
        pickerSelected: value.id,
        defaultSelected: value.name
      
    );