如果在 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.