React-native 選擇器默認值

Question

我有以下代碼

 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 。 請幫忙

Answer 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 來解決這個問題。