[英]how to create list of Years in the dropdown using react js JSX
我想在 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');
首先,在數組中生成所有需要的年份
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>
...
);
}
希望這會有所幫助!
這可能會有所幫助。 確保您正確設置了正確的狀態並在 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>
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>
);
}
}
無論如何,這可能不是最佳解決方案,但這只是為了讓您了解如何去做。
另一種方式:
getDropList = () => {
const year = new Date().getFullYear();
return (
Array.from( new Array(50), (v,i) =>
<option key={i} value={year+i}>{year+i}</option>
)
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.