如何使用react js JSX在下拉列表中创建年份列表

Question

我想在 react JSX 中创建一个年份列表

我有 Jquery 的代码，请看下面。

var minOffset = 0, maxOffset = 60; // Change to whatever you want
var thisYear = (new Date()).getFullYear();
var select = $('<select>');

for (var i = minOffset; i <= maxOffset; i++) {
    var year = thisYear - i;
    $('<option>', {value: year, text: year}).appendTo(select);
}

select.appendTo('body');

http://jsfiddle.net/DhpBg/739/

Answer 1

首先，在数组中生成所有需要的年份

const year = (new Date()).getFullYear();
const years = Array.from(new Array(20),( val, index) => index + year);

一旦你有了这些年，你就可以遍历数组并在select控制中列出它。

考虑以下代码片段

constructor(props){
  super(props);
  const year = (new Date()).getFullYear();
  this.years = Array.from(new Array(20),(val, index) => index + year);
}

render() {
  return(
    ...
    <select>
     {
       this.years.map((year, index) => {
         return <option key={`year${index}`} value={year}>{year}</option>
       })
     }
    </select>
    ...
  );
}

希望这会有所帮助！