React-native 选择器默认值答案

【问题标题】：React-native picker default valueReact-native 选择器默认值
【发布时间】：2019-07-02 11:56:38
【问题描述】：

我有以下代码

 import React, { Component } from 'react'; 
import { Text, View,StyleSheet, Picker } from 'react-native';

 export default class App extends Component {   constructor(props) {
     super(props)

     this.state = {
       language: '',
       firstLanguage: 'java',
      secondLanguage: 'js',
    }   }
      render() {
     return (
       <View style={styles.container}>
         <Text style={styles.title}>Unstyled: {this.state.language}</Text>
         <Picker
           style={styles.picker} itemStyle={styles.pickerItem}
           selectedValue={this.state.language}
           onValueChange={(itemValue) => this.setState({language: itemValue})}

           <Picker.Item label="Java" value="java" />
           <Picker.Item label="JavaScript" value="js" />
           <Picker.Item label="Python" value="python" />
           <Picker.Item label="Haxe" value="haxe" />
         </Picker>


       </View>
     );   } }

当组件加载时，组件状态内语言的值为空字符串，但在选择器中，Java 被选中。我也希望将状态值设置为java。请帮忙

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

如果它为 null 或为空，则在选择器 Item 中调用一个函数来设置值，如下面的代码：

export default class App extends Component {
constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {
        language: '',
    };
}            

setFirstValue (value){
    if(this.state.language =='' ||this.state.language == null){
        this.setState({ language: value })
    } 
}
render() {
    return (
        <View>
            <Text>Unstyled: {this.state.language}</Text>
            <Picker
                selectedValue={this.state.language}
                onValueChange={(itemValue) => this.setState({ language: itemValue })}

            >
                <Picker.Item label="Java" value="java" STF = {this.setFirstValue("java")}  />
                <Picker.Item label="JavaScript" value="js" />
                <Picker.Item label="Python" value="python" />
                <Picker.Item label="Haxe" value="haxe" />
            </Picker>
        </View>
    );
}

}

我想也许你也可以通过 ref 来解决这个问题。

【讨论】：