如果在 ReactJs 中應用了多種過濾方法，我們如何根據主頁中的按鈕點擊顯示數據？
[英]How can we display datas according to button clicks in mainpage ....if many filteration method is applied in ReactJs?
問題描述
當有人首先登錄時，我想在表體中顯示 currentUserData 。 然后當點擊“今天”按鈕時，表格應該顯示“ todayData ”....當點擊“本周”按鈕時，表格應該顯示“ thisWeekData ”....等....
參考
..........
userData = 數據庫中可用的所有數據，
todayData = 從“userData”中篩選出當天的數據（從主頁點擊“今天”按鈕后調用的函數），
thisWeekData = 來自“userData”的當前周過濾數據（從主頁點擊“本周”按鈕后調用的函數）
thisMonthData = 來自“userData”的當前月份的過濾數據（從主頁單擊“本月”按鈕后調用的函數），
customData = 從日期之間的“userData”過濾數據（從主頁單擊“自定義”按鈕后調用的函數），
dropDownUserData = 來自“userData”的過濾數據（單擊主頁中可用的下拉菜單“今天”中的任何用戶后的函數調用），
currentUserData = 分頁顯示用戶數據
{
// 👇️checking whether any current day datas available or not...if, displaying the datas
todayData.length > 0 ?
todayData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>)
:
// 👇️checking whether any this week datas available or not...if, displaying the datas
thisWeekData.length > 0 ?
thisWeekData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>
)
:
// 👇️checking whether any this month datas available or not...if, displaying the datas
thisMonthData.length > 0 ?
thisMonthData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>
)
:
// 👇️checking whether any custom selected datas available or not...if, displaying the datas
customData.length > 0 ?
customData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>
)
:
// 👇️checking whether any datas related to selected user from drop down is available or not...if, displaying the datas
dropDownUserData ?
dropDownUserData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>
)
:
// 👇️checking whether any datas available in database or not...if, displaying the datas
currentUserData && currentUserData.length > 0 ?
// 👇️Search details
currentUserData.filter((value) => {
if (searchInput === '') {
return value
}
else if (value.name.toLowerCase().includes(searchInput.toLowerCase())) {
return value
}
})
// 👇️Displaying datas on table
.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>
) : 'Loading'
}
</tbody>
2 個解決方案
解決方案1
1 已采納 2022-07-02 17:35:53
//👇️ Setting state for showing the required datas when filtering
const [showUserData, setShowUserData] = useState(false)
const [showTodayData, setShowTodayData] = useState(false)
const [showWeekData, setShowWeekData] = useState(false)
const [showMonthData, setShowMonthData] = useState(false)
const [showCustomData, setShowCustomData] = useState(false)
const [showDropDownData, setShowDropDownData] = useState(false)
根據 onClick 函數中的要求將狀態設置為真或假
例如：對於 Today 按鈕，單擊 setShowTodayData(true) setShowWeekData(false) setShowDropDownData(false) 等.....
應用程序.js
{
<tbody className='table-body'>
// 👇️Displaying all datas by deviding into pages
{showUserData && currentUserData.filter((value) => {
if (searchInput === '') {
return value
}
else if (value.name.toLowerCase().includes(searchInput.toLowerCase())) {
return value
}
})
.map((user, id) => {
return <tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>
})
}
// 👇️checking whether any datas related to selected user from drop down is available or not...if, displaying the datas
{showDropDownData && dropDownUserData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>)
}
// 👇️checking whether any Today datas available or not...if, displaying the datas
{showTodayData && todayData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>)
}
// 👇️checking whether any This week datas available or not...if, displaying the datas
{showWeekData && thisWeekData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>)
}
// 👇️checking whether any This month datas available or not...if, displaying the datas
{
showMonthData && thisMonthData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>)
}
// 👇️checking whether any Custom datas available or not...if, displaying the datas
{
showCustomData && customData.map((user, id) =>
<tr key={id} className='table-row'>
<td className='table-item'>{user.date}</td>
<td className='table-item'>{user.from}</td>
<td className='table-item'>{user.to}</td>
<td className='table-item'>{user.duration}</td>
<td className='table-item'>{user.hangup}</td>
<td className='table-item'>{user.action}</td>
</tr>)
}
</tbody>
}
解決方案2
0 2022-07-03 02:56:50
創建記憶化的todayData 、 thisWeekData和thisMonthData 。
const todayData = useMemo(() => {
...
},[userData])
const thisWeekData = useMemo(() => {
...
},[userData])
const thisMonthData = useMemo(() => {
...
},[userData])
然后創建一個showingData state 將成為渲染參考數據
const [showingData, setShowingData] = useState();
render (
...
{showingData.map((data) => {
})}
...
)
最后，在按鈕處，使用setState分配數據：
render (
...
<botton onClick={() => setShowingData(todayData)}>
Today
</button>
<botton onClick={() => setShowingData(thisWeekData)}>
This Week
</button>
<botton onClick={() => setShowingData(thisMonth)}>
This Month
</button>
...
)
示例如下：
function makeUserData() { const daysInMonth = []; const monthDate = moment().startOf('isoWeek'); _.times(monthDate.daysInMonth(), function (n) { const hours = Math.random() * (0 + 12) + 0 const minutes = Math.random() * (0 + 60) + 0 const start = moment(n).set("hour", hours).set("minute", minutes); const end = moment(start).add(Math.random() * (0 + 30) + 0, 'minutes'); daysInMonth.push({ date: monthDate.format('MM/DD/YYYY'), name: monthDate.format('dddd'), from: start.format("HH:mm"), to: end.format("HH:mm"), duration: `${parseInt((moment(end) - moment(start))/60000)} minutes` }); monthDate.add(1, 'day'); }); return daysInMonth; } const { useEffect, useState, useMemo } = React; function App() { const [showingData, setShowingData] = useState([]); const today = useMemo(() => moment()); const userData = useMemo(() => { return makeUserData(); },[]); useEffect(() => { setShowingData(userData); }, [userData]); const todayData = useMemo(() => { return userData.filter((data) => data.date === today.format('MM/DD/YYYY')); }, [today, userData]); const thisWeekData = useMemo(() => { const startOfWeek = today.clone().startOf('isoWeek'); const endOfWeek = today.clone().endOf('isoWeek'); return userData.filter((data) => { return (new Date(data.date) >= new Date(startOfWeek) && new Date(data.date) <= new Date(endOfWeek)) }); }, [today, userData]); const thisMonthData = useMemo(() => { const startDate = today.clone().startOf('month'); return userData.filter((data) => new Date(data.date) >= new Date(startDate)); }, [today, userData]); return ( <div> <button onClick={() => setShowingData(userData)}> Current Data </button> <button onClick={() => setShowingData(todayData)}> Today </button> <button onClick={() => setShowingData(thisWeekData)}> This Week </button> <button onClick={() => setShowingData(thisMonthData)}> This Month </button> <table> <thead> <tr> <th>Date</th> <th>Name</th> <th>From</th> <th>To</th> <th>Duration</th> </tr> </thead> <tbody> {showingData.map((data, index) => ( <tr key={index}> <td>{data.date}</td> <td>{data.name}</td> <td>{data.from}</td> <td>{data.to}</td> <td>{data.duration}</td> </tr> ))} </tbody> </table> </div> ) } ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <div class='react'></div>
有沒有一種方法可以在點擊一定次數后禁用 ReactJS 中的按鈕？
[英]Is there a method of disabling a button in ReactJS after a certain number of clicks?
我們如何在用戶每次按下提交按鈕時多次顯示 html 表單值？
[英]how can we display html form values as many times as the user insert them by pressing submit button each time?
如果用戶單擊后退瀏覽器按鈕，我們可以導航到其他頁面嗎？
[英]Can we navigate to a different page if the user clicks on the back browser button?
用戶單擊Facebook贊按鈕后，如何顯示帶有消息的彈出窗口？
[英]How can I display a popup window with a message after a user clicks the Facebook like button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.