react-native-element-dropdown 默认值不起作用

Question

我正在使用react-native-element-dropdown作为我的年份和月份下拉列表。我想将当前月份和年份显示为默认值。我设置了值部分，但默认值没有出现。我不知道问题出在哪里。

import React, { useState} from 'react';
import { View,StatusBar, SafeAreaView} from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

import Icon from 'react-native-vector-icons/Ionicons';
import { Card,Button } from 'react-native-paper';

import Footer from '../Templates/Footer/';
import Styles from '../../resources/Style';
import {GetMonth,GetYear} from '../../resources/Utill/common.js';
import OfflineNotice from '../../resources/Notice/OfflineNotice';

function Attendence({navigation}) {

    const [yearvalue, setYearAttendance] = useState( (new Date()).getFullYear());
    const [monthvalue, setMonthAttendance] = useState( (new Date()).getMonth()+1);
    const [isFocus, setIsFocus] = useState(false);

    const rederSearchBar=()=>{
        return(
          <Card>
          <Card.Actions>
            <Dropdown
              style={[Styles.dropdown, isFocus && { borderColor: 'blue' }]}
              placeholderStyle={Styles.placeholderStyle}
              selectedTextStyle={Styles.selectedTextStyle}
              inputSearchStyle={Styles.inputSearchStyle}
              data={GetYear()}
              maxHeight={400}
              labelField="label"
              valueField="value"
              placeholder='Year'
              value={yearvalue}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
              onChange={item => {
                setYearAttendance(item.value);
                setIsFocus(false);
              }}
            />
            <Dropdown
              style={[Styles.dropdown, isFocus && { borderColor: 'blue' }]}
              placeholderStyle={Styles.placeholderStyle}
              selectedTextStyle={Styles.selectedTextStyle}
              inputSearchStyle={Styles.inputSearchStyle}
              data={GetMonth()}
              maxHeight={400}
              labelField="label"
              valueField="value"
              placeholder='Month'
              value={monthvalue}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
              onChange={item => {
                setMonthAttendance(item.value);
                setIsFocus(false);
              }}  
          />
           <Button mode="contained" buttonColor="#3377FF" textColor="#fff" onPress={() => loadAttendance()}><Icon size={20} name="search-circle" /> </Button>
          </Card.Actions>
        </Card> 
        );
    
       }
    return (
        <SafeAreaView style={Styles.root}>
         <StatusBar barStyle="light-content" backgroundColor="#b61b1b" />
         <OfflineNotice/>

          <View style={Styles.salcontainer} >
            {rederSearchBar()}
            <Footer/>
          </View>
        </SafeAreaView>
      );
}

export default Attendence;

Utill.js

import React from "react";

const GetYear =(message)=>{
    let obj = [];
    for (let index = 2016; index <= new Date().getFullYear(); index++) {
      obj.push({
          label : index.toString(),
          value : index.toString()
        });
    }
    return obj;
}

const GetMonth =(message)=>{
    const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December" ];
    let obj = [];
        for (let index = 0; index < monthNames.length; index++) {
            obj.push({
                label : monthNames[index],
                value : index.toString()
            });
        }
    return obj;
}


export {GetYear, GetMonth}

任何人都可以帮我设置下拉列表的默认值吗？我希望在下拉列表中显示当前月份和年份作为默认值。

Answer 1

让我解释一下我如何解决这个问题。经过多次研究，我发现唯一的方法是在

placeholder

部分显示当前年份和月份。这是我的编码..

const monthName = getMonthName((new Date()).getMonth());
const yearname = ((new Date()).getFullYear()).toString();
<Dropdown
      style={[Styles.dropdown, isFocus && { borderColor: 'blue' }]}
      placeholderStyle={Styles.placeholderStyle}
      selectedTextStyle={Styles.selectedTextStyle}
      inputSearchStyle={Styles.inputSearchStyle}
      data={GetYear()}
      maxHeight={400}
      labelField="label"
      valueField='value'
      placeholder={yearname}
      value={yearAttendance}
      onFocus={() => setIsFocus(true)}
      onBlur={() => setIsFocus(false)}
      onChange={item => {
        setYearAttendance(item.value);
        setIsFocus(false);
      }}
    />
    <Dropdown
      style={[Styles.dropdown, isFocus && { borderColor: 'blue' }]}
      placeholderStyle={Styles.placeholderStyle}
      selectedTextStyle={Styles.selectedTextStyle}
      inputSearchStyle={Styles.inputSearchStyle}
      data={GetMonth()}
      maxHeight={400}
      labelField="label"
      valueField="value"
      placeholder={monthName}
      value={monthAttendance}
      onFocus={() => setIsFocus(true)}
      onBlur={() => setIsFocus(false)}
      onChange={item => {
      setMonthAttendance(item.value);
      setIsFocus(false);
    }}  
    
  /> 

但我知道这不是正确的方法。如果有人知道解决这个问题，请在这里留言。