选择器项目选择上的调用函数反应原生答案

【问题标题】：calling function on Picker item Selection react native选择器项目选择上的调用函数反应原生
【发布时间】：2017-12-06 14:29:42
【问题描述】：

每当我从picker 中选择一个项目并使用alert 显示所选项目时，我都会尝试调用function。
这就是我正在做的事情：-

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',
}
});

此代码显示先前选择的值。我怎样才能让它显示当前选定的值。
请提出我错过的地方。

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

首先setState 方法不返回任何内容。第二次调用setState方法后，你无法知道状态是否改变，这是因为setState方法是异步的。您可以将回调分配给 setState 方法的第二个参数以了解状态更改。

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',
}
});

【讨论】：

【解决方案2】：

Alert 正在显示旧值，因为它在 this.setState({throttlemode:throttlemodeValue}) 完成之前被调用。所以正确的做法是

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>
 );
}

【讨论】：

【解决方案3】：

使用 componentDidUpdate 像这样查看选择的选择器值

componentDidUpdate(){

this.handlePickerTest();

}

handlePickerTest = () => {

alert(this.state.throttlemode);

}

【讨论】：