javascript - 如何使用 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>
    ...
  );
}

希望这会有所帮助！

Answer 2

这可能会有所帮助。确保正确设置正确的状态并在 onHandleChange 中处理更新。

const minOffset = 0;
const maxOffset = 60; 

class DatePicker extends React.Component {
  constructor() {
    super();
    
    const thisYear = (new Date()).getFullYear();
    
    this.state = {
      thisYear: thisYear,
      selectedYear: thisYear
    }
  }
  
  onHandleChange = (evt) => {
    // Handle Change Here
    // alert(evt.target.value);
    this.setState({ selectedYear: evt.target.value });
  };

  render() {
    const { thisYear, selectedYear } = this.state;
    const options = [];
    
    for (let i = minOffset; i <= maxOffset; i++) {
      const year = thisYear - i;
      options.push(<option value={year}>{year}</option>);
    }
    return (
      <div>
        <select value={this.selectedYear} onChange={this.onHandleChange}> 
          {options}
        </select>
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<DatePicker />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></app>

Answer 3

class DropDown extends Component {

render() {
    let minOffset = 0, maxOffset = 10;
    let thisYear = (new Date()).getFullYear();
    let allYears = [];
    for(let x = 0; x <= maxOffset; x++) {
        allYears.push(thisYear - x)
    }

    const yearList = allYears.map((x) => {return(<option key={x}>{x}</option>)});
    return(
        <div>
            <select>
                {yearList}
            </select>
        </div>
    );
}

}

this might not be the most optimal solution by any means but this is just to give you an idea of how to do it.

Answer 4

还有一种方式：

  getDropList = () => {
    const year = new Date().getFullYear();
    return (
      Array.from( new Array(50), (v,i) =>
        <option key={i} value={year+i}>{year+i}</option>
      )
    );
  };

小提琴：https ://jsfiddle.net/knik/n5u2wwjg/9637/