android - 使用 React-Native Picker 检测选择当前 selectedValue

Question

我正在使用 React-Native 的 Picker component .假设我有以下内容:

export class someComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someVal: 1
        };
    }

    onNewValueSelected = (newVal) => {
        Alert.alert('You selected the value: ' + newVal)
        this.setState({someVal: newVal});
    }

    render() {


        return (
            <View style={styles.container}>
                <Picker
                    selectedValue={this.state.someVal}
                    prompt="Select Some Value"
                    onValueChange={this.onNewValueSelected}
                    mode='dropdown'>
                    <Picker.Item label='one' value={1} />
                    <Picker.Item label='two' value={2} />
                    <Picker.Item label='three' value={3} />
                </Picker>
            </View>
        );
    }

}

我如何检测当前选择的值在模态中被选中？假设这个组件第一次安装时用户选择了 1。我怎么知道他们选择了 1？ onValueChange 在选择 selectedValue 时不会触发(至少在 Android 上)。我也没有看到任何为此组件创建解决方法的方法，因为我不知道一种检测何时打开和关闭 Picker 的模式或下拉列表的方法。

也许我只需要构建一个自定义按钮和模式来处理这个问题？任何帮助表示赞赏。谢谢!

Answer 1

你必须为每个设置唯一的键，像这样:

 on_type_Change(itemValue,itemIndex) {
    console.warn(itemValue,itemIndex);
}

<Picker
 selectedValue={this.state.value}
 onValueChange ={
 (itemValue, itemIndex) =>
 this.on_type_Change(itemValue, itemIndex)}
 mode='dropdown'>
 <Picker.Item label='one' value='1' key='uniquekey1'/>
 <Picker.Item label='one' value='2' key='uniquekey2'/>
 <Picker.Item label='one' value='3' key='uniquekey3'/>
</Picker>

或

on_type_Change(value) {
    console.warn(value);
}

<Picker
 selectedValue={this.state.value}
 onValueChange={this.on_type_Change.bind(this)}
 mode='dropdown'>
 <Picker.Item label='one' value='1' key='uniquekey1'/>
 <Picker.Item label='one' value='2' key='uniquekey2'/>
 <Picker.Item label='one' value='3' key='uniquekey3'/>
</Picker>