从react- onValueChange中的选取器获取值

Question

我正在使用react native开发一个应用程序。我已经实现了一个用户数据列表。数据的一个例子是这样的。

UID234 {"name":"Chris","age":31,"traits":{"eyes":"blue","shoe_size":10}}

这是我的代码。

import RNPickerSelect from 'react-native-picker-select';

...


  <RNPickerSelect
     onValueChange={(value) => console.log(value)} // そのユーザーのvalueを取る
     // {console.log(to_user)}
    items={[
      { label: 'Chris', value: 'UID234' },
      { label: 'Marge', value: 'UID345' },
      { label: 'Yuri', value: 'UID456' }       
     ]}
     style={pickerSelectStyles}
     placeholder={{ label: '選択してください', value: '' }}
     />

在本例中，当我选择Chris时，我可以看到控制台上显示了"UID234“。

我想要做的是在屏幕上打印"Chris“。我该怎么做呢？请帮帮我。

Answer 1

react-native-picker-select文档说索引可以通过onValueChange回调传入。用它来拿到标签。

import RNPickerSelect from 'react-native-picker-select';

...

const itemList = [
    { label: 'Chris', value: 'UID234' },
    { label: 'Marge', value: 'UID345' },
    { label: 'Yuri', value: 'UID456' }       
   ];

<RNPickerSelect
  onValueChange={(value, index) => console.log(itemList[index].label)} // <- get label from array
  // {console.log(to_user)}
  items={itemList}
  style={pickerSelectStyles}
  placeholder={{ label: '選択してください', value: '' }}
 />

Answer 2

您需要将数据保存为状态表单，以便显示标签

this.state ={
  user : '' 
 }

<RNPickerSelect
    onValueChange={(value) => {this.setState({user: value,})}}
    items={[
      { label: 'Chris', value: 'UID234' },
      { label: 'Marge', value: 'UID345' },
      { label: 'Yuri', value: 'UID456' }       
     ]}
     style={pickerSelectStyles}
     value={this.state.user}
     placeholder={{ label: '選択してください', value: '' }}
     />