Question

我有一个来自react-native-picker-select的选择器。我还有一个按钮，如果我按它，我想将道具传递给选择器并将其显示为标签。

我尝试通过按钮设置callback函数，将道具传递给选择器，并将标签设置为道具。我可以看到道具通过了，但选择器没有更新。

Score.js

<View style={styles.button}>
  <TouchableOpacity
         style={styles.scoreButton}
         onPress={() => this.props.pressMe()}>
         <Text style={{ color: 'white' }}>Press</Text>
  </TouchableOpacity>
</View>

Main.js

pressMe = () => {
    if (this.state.level== 1) {
      this.setState({ scoreInput: 100 });
    }
  };

<Deadlift
   scoreInput={this.state.scoreInput}/>

<View style={styles.scoreContainer}>
   <Score
      pressMe={this.pressMe} />
</View>

Deadlift.js

 var picker = (<Picker
          {...this.props}
          style={pickerSelectStyles}
          placeholder={{
            label: 'Weight',
            value: null,
          }}
          items={this.state.items}
          onValueChange={value => {
            onDLHandler(value, this.getScore(value));
          }}
          value={this.props.scoreInput} <- outside of picker shows this is 
                          logged as 100 but value is not being updated on picker
        />)

<View>{picker}</View>

Answer 1

根据documentation的“价值”道具

将尝试通过以下方式从items数组中找到匹配的项目检查每个项目的value属性。如果找到，它将更新组件以显示该项目为选中状态。如果找不到该值，则它将默认为第一项。

选择器未在items数组中找到对象“ {scoreInput：100}”，因此选择器不会更新。如果要更新选择器，还必须添加项目数组

Answer 2

如文档所述，项目应该是带有标签和值键的对象数组，而不仅仅是值数组

https://github.com/lawnstarter/react-native-picker-select/blob/master/README.md#props

如何将道具传递给React Picker

2 个答案: