Question

我正在尝试在下拉菜单中绑定下拉菜单以进行日期选择，我有一个年，月和日的下拉菜单。我想显示当前年份的过去10年。

我尝试在构造函数中设置状态，然后还尝试使用componentDidMount，但它不起作用。它找不到州的年份选项。

import React, { PropTypes } from 'react'
class DatePicker extends React.Component {
  state = {
    yearOptions: []
  }

  componentDidMount() {
    this.setState({ yearOptions:this.getYearsOptions() });
  }

  getYearsOptions = () => {
    let years = [];
    var currentYear = moment().add(-10, 'year').year();
    for (let index = 10; index >= 0; index--) {
        var year = currentYear + index;
        years.push({ key: year, value: year.toString(), text: year });

    }
    return years;
  };

  render () {
    const {yearOptions } = this.state;    
    return (
            <Form.Select                                                 
                   compact                                                   
                   selection                                                     
                   placeholder='Year'                                                    
                   options={yearsOptions}                                                    
                   name="birthDateYear" />
            );
  }
}

export default DatePicker ;

它找不到状态yearOptions

Answer 1

import React, { PropTypes } from 'react'
import moment from 'moment'
class DatePicker extends React.Component {
  state = {
    yearOptions: []
  }

  componentDidMount() {
    this.setState({ yearOptions: this.getYearsOptions() });
  }

  getYearsOptions = () => {
    let years = [];
    let currentYear = moment().add(-10, 'year').year();
    for (let index = 10; index >= 0; index--) {
      var year = currentYear + index;
      years.push({ label: year.toString(), value: year});
       // Clarity mentioned 
    }
    return years;
  };

  render() {
    const { yearOptions } = this.state;
    console.log("yearsOptions", yearOptions)
    return (
      <Form.Select
        compact
        selection
        placeholder='Year'
        options={yearOptions} //here spell mistake
        name="birthDateYear" />
    );
  }
}

export default DatePicker;

您犯过的小拼写错误

Answer 2

options={yearsOptions}

应该是

options={yearOptions}

years.push({ key: year, value: year.toString(), text: year });

应该是

years.push({ value: year, label: year.toString()});

Answer 3

您应该在构造函数中设置初始状态。

import React, { PropTypes } from 'react'
        class DatePicker extends React.Component {
        constructor(props){  
           super(props)
           this.state = {
              yearOptions: this.getYearsOptions()
           }
        }

        getYearsOptions = () => {
           let years = [];
           var currentYear = moment().add(-10, 'year').year();
           for (let index = 10; index >= 0; index--) {
                var year = currentYear + index;
                years.push({ key: year, value: year.toString(), text: year });
            }
            return years;
          };

          render () {
            const {yearOptions } = this.state;    
            return (
                    <Form.Select                                                 
                           compact                                                   
                           selection                                                     
                           placeholder='Year'                                                    
                           options={yearsOptions}                                                    
                           name="birthDateYear" />
                    );
          }
        }

        export default DatePicker ;

使用功能初始化反应状态

3 个答案: