反应:生成所有出生日期选择选项

时间:2019-12-17 04:12:20

标签: javascript reactjs react-select

目前我的脚本中有大量的HTML内容,并且很难滚动,是否可以生成2019年至1900年的所有选项,然后循环遍历它们?

            <select
              className='form--dob-year'
              name='year'
              onChange={onChange}
              value={year}
            >
              <option value='0'>Year</option>
              <option value='2019'>2019</option>
              <option value='2018'>2018</option>
              <option value='2017'>2017</option>
              <option value='2016'>2016</option>
              <option value='2015'>2015</option>
              <option value='2014'>2014</option>
              <option value='2013'>2013</option>
              <option value='2012'>2012</option>
              <option value='2011'>2011</option>
              <option value='2010'>2010</option>
              <option value='2009'>2009</option>
              <option value='2008'>2008</option>
              <option value='2007'>2007</option>
              <option value='2006'>2006</option>
              <option value='2005'>2005</option>
              <option value='2004'>2004</option>
              <option value='2003'>2003</option>
              <option value='2002'>2002</option>
              <option value='2001'>2001</option>
              <option value='2000'>2000</option>
              <option value='1999'>1999</option>
              <option value='1998'>1998</option>
              <option value='1997'>1997</option>
              <option value='1996'>1996</option>
              <option value='1995'>1995</option>
              <option value='1994'>1994</option>
              <option value='1993'>1993</option>
              <option value='1992'>1992</option>
              <option value='1991'>1991</option>
              <option value='1990'>1990</option>
              <option value='1989'>1989</option>
              <option value='1988'>1988</option>
              <option value='1987'>1987</option>
              <option value='1986'>1986</option>
              <option value='1985'>1985</option>
              <option value='1984'>1984</option>
              <option value='1983'>1983</option>
              <option value='1982'>1982</option>
              <option value='1981'>1981</option>
              <option value='1980'>1980</option>
              <option value='1979'>1979</option>
              <option value='1978'>1978</option>
              <option value='1977'>1977</option>
              <option value='1976'>1976</option>
              <option value='1975'>1975</option>
              <option value='1974'>1974</option>
              <option value='1973'>1973</option>
              <option value='1972'>1972</option>
              <option value='1971'>1971</option>
              <option value='1970'>1970</option>
              <option value='1969'>1969</option>
              <option value='1968'>1968</option>
              <option value='1967'>1967</option>
              <option value='1966'>1966</option>
              <option value='1965'>1965</option>
              <option value='1964'>1964</option>
              <option value='1963'>1963</option>
              <option value='1962'>1962</option>
              <option value='1961'>1961</option>
              <option value='1960'>1960</option>
              <option value='1959'>1959</option>
              <option value='1958'>1958</option>
              <option value='1957'>1957</option>
              <option value='1956'>1956</option>
              <option value='1955'>1955</option>
              <option value='1954'>1954</option>
              <option value='1953'>1953</option>
              <option value='1952'>1952</option>
              <option value='1951'>1951</option>
              <option value='1950'>1950</option>
              <option value='1949'>1949</option>
              <option value='1948'>1948</option>
              <option value='1947'>1947</option>
              <option value='1946'>1946</option>
              <option value='1945'>1945</option>
              <option value='1944'>1944</option>
              <option value='1943'>1943</option>
              <option value='1942'>1942</option>
              <option value='1941'>1941</option>
              <option value='1940'>1940</option>
              <option value='1939'>1939</option>
              <option value='1938'>1938</option>
              <option value='1937'>1937</option>
              <option value='1936'>1936</option>
              <option value='1935'>1935</option>
              <option value='1934'>1934</option>
              <option value='1933'>1933</option>
              <option value='1932'>1932</option>
              <option value='1931'>1931</option>
              <option value='1930'>1930</option>
              <option value='1929'>1929</option>
              <option value='1928'>1928</option>
              <option value='1927'>1927</option>
              <option value='1926'>1926</option>
              <option value='1925'>1925</option>
              <option value='1924'>1924</option>
              <option value='1923'>1923</option>
              <option value='1922'>1922</option>
              <option value='1921'>1921</option>
              <option value='1920'>1920</option>
              <option value='1919'>1919</option>
              <option value='1918'>1918</option>
              <option value='1917'>1917</option>
              <option value='1916'>1916</option>
              <option value='1915'>1915</option>
              <option value='1914'>1914</option>
              <option value='1913'>1913</option>
              <option value='1912'>1912</option>
              <option value='1911'>1911</option>
              <option value='1910'>1910</option>
              <option value='1909'>1909</option>
              <option value='1908'>1908</option>
              <option value='1907'>1907</option>
              <option value='1906'>1906</option>
              <option value='1905'>1905</option>
              <option value='1904'>1904</option>
              <option value='1903'>1903</option>
              <option value='1902'>1902</option>
              <option value='1901'>1901</option>
              <option value='1900'>1900</option>
            </select>
    ```

1 个答案:

答案 0 :(得分:3)

只需使用for循环即可。创建一个返回class SecondPage extends StatefulWidget { @override _SecondPageState createState() => _SecondPageState(); } class _SecondPageState extends State<SecondPage> { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // Text( // 'Add Your Favorite Sites Here!❤', // style: TextStyle(color: Colors.white), // ), // Container( // child: Icon(Icons.favorite, size: 150, color: Colors.blue[100]), // ), SizedBox(height: 250), FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => FavoriteList(), ), ); }, child: Icon(Icons.add), foregroundColor: Colors.blue, ), ], ); } } 数组的函数:

JSX.Element

然后在您的组件中:

const generateYearOptions = () => {
  const arr = [];

  const startYear = 1900;
  const endYear = new Date().getFullYear();

  for (let i = endYear; i >= startYear; i--) {
    arr.push(<option value={i}>{i}</option>);
  }

  return arr;
};