javascript - calling function on Picker item Selection react native - Stack Overflow

admin管理员组

文章数量:1325014

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.

• javascript
• android
• reactjs
• react-native

Share Improve this question Follow edited Dec 6, 2017 at 6:13 itzmebibin 9,43999 gold badges5151 silver badges6262 bronze badges asked Dec 6, 2017 at 6:05 hitttthitttt 1,18944 gold badges1919 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: 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