我希望根據用戶選擇的年份顯示玩家。例如，如果我在第 2 次選擇的第 1 次選擇中選擇 2011 年，則僅顯示 2011 年出生的球員。我為每年創建了一個 if 陳述句并檢查他是否出生在當年的 1 月 1 日到 12 月 31 日之間，但我不要認為這樣做效率太高（100 個 if 陳述句）。我正在使用 React js
代碼如下
import React, { useState, useEffect } from 'react';
import './style.css';
export default function App() {
const vitet = [
2030, 2029, 2028, 2027, 2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019,
2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007,
2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995,
1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983,
1982, 1981, 1980, 1979, 1978, 1977, 1976, 1975, 1974, 1973, 1972, 1971,
1970, 1969, 1968, 1967, 1966, 1965, 1964, 1963, 1962, 1961, 1960, 1959,
1958, 1957, 1956, 1955, 1954, 1953, 1952, 1951, 1950, 1949, 1948, 1947,
1946, 1945, 1944, 1943, 1942, 1941, 1940, 1939, 1938, 1937, 1936, 1935,
1934, 1933, 1932, 1931, 1930, 1929, 1928, 1927, 1926, 1925, 1924, 1923,
1922, 1921, 1920, 1919, 1918, 1917, 1916, 1915, 1914, 1913, 1912, 1911,
];
const [year, setyear] = useState('');
const [option, setOption] = useState([]);
const [players, setPlayers] = useState([
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
]);
let secondOptions = players;
if (year === '2010') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2010-01-01' && players.birthday <= '2010-12-31'
);
} else if (year === '2011') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2011-01-01' && players.birthday <= '2011-12-31'
);
} else if (year === '2012') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2012-01-01' && players.birthday <= '2012-12-31'
);
} else if (year === '2013') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2013-01-01' && players.birthday <= '2013-12-31'
);
} else if (year === '2014') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2014-01-01' && players.birthday <= '2014-12-31'
);
} else if (year === '2015') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2015-01-01' && players.birthday <= '2015-12-31'
);
} else if (year === '2016') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2016-01-01' && players.birthday <= '2016-12-31'
);
} else if (year === '2017') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2017-01-01' && players.birthday <= '2017-12-31'
);
} else if (year === '2018') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2018-01-01' && players.birthday <= '2018-12-31'
);
} else if (year === '2019') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2019-01-01' && players.birthday <= '2019-12-31'
);
} else if (year === '2000') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2000-01-01' && players.birthday <= '2000-12-31'
);
} else {
secondOptions = [];
}
useEffect(() => {
// Update the document title using the browser API
console.log('playerat per ke optioni', secondOptions);
});
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select name="" id="" onChange={(e) => setyear(e.target.value)}>
{/* <option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option> */}
{vitet.map((item) => (
<option value={item}>{item}</option>
))}
</select>
<select>
{secondOptions.map((item) => (
<option key={item.playerId}>{item.playerName}</option>
))}
</select>
<p> {year}</p>
</div>
);
}
看看你可以在這里看到的代碼編輯器。
https://stackblitz.com/edit/react-jruwh9
uj5u.com熱心網友回復：
是的，你應該擺脫所有的if條件。
你可以這樣做：
secondOptions = players.filter(
(player) =>{
let split = player.birthday.split('-')
return split[0] === year
}
);
uj5u.com熱心網友回復：
好吧，如果您真的想將日期視為字串（請查看答案末尾的注釋），您可以執行以下操作
import React, { useState } from 'react';
import './style.css';
const years = [
2030, 2029, 2028, 2027, 2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019,
2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007,
2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995,
1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983,
1982, 1981, 1980, 1979, 1978, 1977, 1976, 1975, 1974, 1973, 1972, 1971,
1970, 1969, 1968, 1967, 1966, 1965, 1964, 1963, 1962, 1961, 1960, 1959,
1958, 1957, 1956, 1955, 1954, 1953, 1952, 1951, 1950, 1949, 1948, 1947,
1946, 1945, 1944, 1943, 1942, 1941, 1940, 1939, 1938, 1937, 1936, 1935,
1934, 1933, 1932, 1931, 1930, 1929, 1928, 1927, 1926, 1925, 1924, 1923,
1922, 1921, 1920, 1919, 1918, 1917, 1916, 1915, 1914, 1913, 1912, 1911,
];
const players = [
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
];
export default function App() {
const [year, setYear] = useState('');
const secondOptions = players.filter(player => player.birthday >= `${year}-01-01` && player.birthday <= `${year}-12-31`);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select onChange={(e) => setYear(e.target.value)}>
{years.map((item) => (
<option key={`year_option_${item}`} value={item}>{item}</option>
))}
</select>
<select>
{secondOptions.map((item) => (
<option key={`second_option_${item.playerId}`} value={item.playerId}>{item.playerName}</option>
))}
</select>
<p>{year}</p>
</div>
);
}
我將一些變數移出組件，因為就像現在一樣，它們不需要在組件中。此外，我添加了一些缺少的鍵并洗掉了未使用的變數，以供演示建議。
關于日期的重要說明
通常最好將日期視為Date字串而不是字串。
如果您決定處理您的日期廣告Date實體，那么您可以使用 JavaScript 中可用的函式，并執行與我在過濾器部分中發布的代碼中顯示的類似的操作。
uj5u.com熱心網友回復：
我將從優化您的年份選擇開始。使用開始年份，并填寫一個陣列直到現在。沒有人會出生在未來……然而；）
下一個過濾只有那些有球員的年份，下一個如果你設定年份，只需過濾當前年份的球員。
import React, { useState } from 'react';
import './style.css';
export default function App() {
const START_YEAR = 1911;
const END_YEAR = new Date().getFullYear() 1;
const [year, setyear] = useState('');
const [players, setPlayers] = useState([
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
]);
const vitet = new Array(END_YEAR - START_YEAR)
.fill(START_YEAR)
.map((current, i) => current i)
.filter(
(year) =>
players.find(
(player) => player.birthday.substr(0, 4) === year.toString()
) !== undefined
);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select name="" id="" onChange={(e) => setyear(e.target.value)}>
{vitet.map((item) => (
<option value={item}>{item}</option>
))}
</select>
<select>
{players
.filter((player) => player.birthday.substr(0, 4) === year.toString())
.map((item) => (
<option key={item.playerId}>{item.playerName}</option>
))}
</select>
<p> {year}</p>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/446496.html
標籤：javascript 反应 日期 输入 筛选