admin管理员组

文章数量:1323539

I am trying to call a function whenever i select an item from picker and display the selected item with alert.
Here's what i am doing :-

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button,Platform,ActivityIndicator, Text, Picker, ScrollView } from 'react-native';
export default class FirstProject extends Component {
   constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    throttlemode:'',
  }
}
GetSelectedThrottleModeItem=(throttlemode)=>{
Alert.alert(this.state.throttlemode)
}
render() {
return (
    <View style={styles.MainContainerAddCamp}>
    <Text style={{fontSize: 12}}> Throttle Mode</Text>
    <Picker style={styles.PickerStyleClass}
  selectedValue={this.state.throttlemode}
  onValueChange={(throttlemodeValue, throttlemodeIndex) => this.GetSelectedThrottleModeItem(this.setState({throttlemode:throttlemodeValue}))}>
    <Picker.Item label="Asap" value="asap" />
    <Picker.Item label="Even" value="even" />
    </Picker>
   </View>
  );
}
}
const styles = StyleSheet.create({
MainContainerAddCamp :{
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
TextInputStyleClass: {
textAlign: 'left',
paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: '#00BCD4',
},
PickerStyleClass:{
    backgroundColor:'#87ceeb',
    paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
 borderColor: '#FF5722',
}
});

This code is displaying the previously selected value. How can i make it to display current selected value.
Please suggest where i have missed.

I am trying to call a function whenever i select an item from picker and display the selected item with alert.
Here's what i am doing :-

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button,Platform,ActivityIndicator, Text, Picker, ScrollView } from 'react-native';
export default class FirstProject extends Component {
   constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    throttlemode:'',
  }
}
GetSelectedThrottleModeItem=(throttlemode)=>{
Alert.alert(this.state.throttlemode)
}
render() {
return (
    <View style={styles.MainContainerAddCamp}>
    <Text style={{fontSize: 12}}> Throttle Mode</Text>
    <Picker style={styles.PickerStyleClass}
  selectedValue={this.state.throttlemode}
  onValueChange={(throttlemodeValue, throttlemodeIndex) => this.GetSelectedThrottleModeItem(this.setState({throttlemode:throttlemodeValue}))}>
    <Picker.Item label="Asap" value="asap" />
    <Picker.Item label="Even" value="even" />
    </Picker>
   </View>
  );
}
}
const styles = StyleSheet.create({
MainContainerAddCamp :{
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
TextInputStyleClass: {
textAlign: 'left',
paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: '#00BCD4',
},
PickerStyleClass:{
    backgroundColor:'#87ceeb',
    paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
 borderColor: '#FF5722',
}
});

This code is displaying the previously selected value. How can i make it to display current selected value.
Please suggest where i have missed.

Share Improve this question edited Dec 6, 2017 at 6:13 itzmebibin 9,4399 gold badges51 silver badges62 bronze badges asked Dec 6, 2017 at 6:05 hitttthitttt 1,1894 gold badges19 silver badges38 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

First of all setState method returns nothing. Second after calling setState method, you can't know whether state is changed or not, it's because of setState method is asynchronous. You can assign a callback to second argument of setState method to understand state changes.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button,Platform,ActivityIndicator, Text, Picker, ScrollView } from 'react-native';
export default class FirstProject extends Component {
   constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      throttlemode:'',
    }
  }
  onPickerValueChange=(value, index)=>{
    this.setState(
      {
        "throttlemode": value
      },
      () => {
        // here is our callback that will be fired after state change.
        Alert.alert("Throttlemode", this.state.throttlemode);
      }
    );
  }
  render() {
    return (
        <View style={styles.MainContainerAddCamp}>
        <Text style={{fontSize: 12}}> Throttle Mode</Text>
        <Picker style={styles.PickerStyleClass}
        selectedValue={this.state.throttlemode}
        onValueChange={this.onPickerValueChange}>
          <Picker.Item label="Asap" value="asap" />
          <Picker.Item label="Even" value="even" />
        </Picker>
       </View>
      );
  }
}
const styles = StyleSheet.create({
MainContainerAddCamp :{
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
TextInputStyleClass: {
textAlign: 'left',
paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: '#00BCD4',
},
PickerStyleClass:{
    backgroundColor:'#87ceeb',
    paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
 borderColor: '#FF5722',
}
});

Alert is displaying the old value because it is being called before this.setState({throttlemode:throttlemodeValue}) is done. So the correct way of doing is

GetSelectedThrottleModeItem=(throttlemodeValue)=>{
Alert.alert(throttlemodeValue)
this.setState({throttlemode:throttlemodeValue})
}
render() {
 return (
  <View style={styles.MainContainerAddCamp}>
   <Text style={{fontSize: 12}}> Throttle Mode</Text>
   <Picker style={styles.PickerStyleClass}
    selectedValue={this.state.throttlemode}
    onValueChange={(throttlemodeValue, throttlemodeIndex) => 
    this.GetSelectedThrottleModeItem(throttlemodeValue)}>
    <Picker.Item label="Asap" value="asap" />
    <Picker.Item label="Even" value="even" />
   </Picker>
  </View>
 );
}

Use ponentDidUpdate to see the selected picker value like this

ponentDidUpdate(){

this.handlePickerTest();

}

handlePickerTest = () => {

alert(this.state.throttlemode);

}

本文标签: javascriptcalling function on Picker item Selection react nativeStack Overflow