admin管理员组文章数量:1323194
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.
3 Answers
Reset to default 6First 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
版权声明:本文标题:javascript - calling function on Picker item Selection react native - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742124087a2421858.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论