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

Posted 2023-05-07

技术标签:

【中文标题】如何使用 React js JSX 在下拉列表中创建年份列表【英文标题】：how to create list of Years in the dropdown using react js JSX 【发布时间】：2018-09-15 16:44:23 【问题描述】：

我想在 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/

【问题讨论】：

【参考方案1】：

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

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

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

考虑下面的代码sn-p

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>
    ...
  );

希望这会有所帮助！

【讨论】：

看起来不错，但是在 map 函数中的选项标签开始之前缺少return 吗？啊，对了，我错过了return语句。感谢您指出。这个解决方案看起来不错。一个建议，而不是在构造函数中定义 years 数组。让我们有一个辅助函数并使用它来获取年份列表。【参考方案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>

【讨论】：

【参考方案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>
    );

无论如何，这可能不是最佳解决方案，但这只是为了让您了解如何去做。

【讨论】：

它工作正常，但实际上问题是，我使用语义 ui (react) 所以我有一个下拉值，请看一下只需将 Years 数组放入选项中，它应该可以正常工作。根据 SUI 文档，我无法在其中传递如果您认为要更改该数组，可以使用 let 代替 const。我用语义-ui-react 库尝试了它，它对我来说效果很好..【参考方案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/

【讨论】：

以上是关于如何使用 React js JSX 在下拉列表中创建年份列表的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 React.js 在 JSX 中循环对象

在 JSX 中使用 React 的 If 语句

如何使用react js在select中设置默认值

五分钟学习React：什么是JSX

在 React 中，如何将 JSX 与返回更多 JSX 的 JS 函数一起返回？

React2.JSX的使用