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时（{至少在Android上），selectedValue不会触发。我也没有看到为此组件创建解决方法的任何方法，因为我不知道检测Picker的模态或下拉列表何时打开和解除的方法。

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

Answer 1

您必须为每个设置唯一的密钥，就像这样：

struct Test: View {
    @State var pressed:Bool = false

    var body: some View {
        ZStack {
            VStack {
                Button(action: {
                    self.pressed = true
                }) {
                    Text("Button")
                        .padding(20)
                        .accentColor(pressed ? Color.green : Color.red)
                }

                Spacer()
            }

            ScrollView {
                Spacer()
                    .frame(height:60)

                Color.gray
                    .frame(height:200)
                    .padding(10)

                Color.gray
                    .frame(height:200)
                    .padding(10)
            }
        }
    }
}

或

 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>

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

1 个答案: