javascript - 如果我的任务日期是当前的，那么它会在我的今天任务中显示任务

问题描述

当我添加任务时，我的应用程序上有今天任务，日期是当前日期，然后我想在今天我的添加任务代码中显示该任务：

    import React, { useState } from 'react';
    import uuid from 'react-uuid';
    import { useSelector, useDispatch } from 'react-redux';
    import DatePicker from 'react-datepicker';
    import 'react-datepicker/dist/react-datepicker.css';
    import database from '../firebase/firebase';
    import '../App.css';
    import {  SingleDatePicker } from 'react-dates';
    import moment from 'moment';
    import 'react-dates/initialize';
    import 'react-dates/lib/css/_datepicker.css';
    
    const AddTasks = () => {
    
        const dispatch = useDispatch();
        const newLocal = null;
        const [selectedDate, setSelectedDate] = useState(moment());
        const [task, setTask] = useState('');
        const Date = moment();
        const userId = useSelector(state => state.auth.uid);
        const [focused, setFoucused]= useState(false);
    const addTask = () => {
        console.log(userId);
        console.log('addedAt');
        const payload = { id: uuid(), text: task, completed: false, addedAt: JSON.stringify(selectedDate)}
        const dbtasksWrapper = database.ref().child(userId).child('tasks');
        return dbtasksWrapper.child(payload.id).update(payload).then(() => {
            setTask('');
            setSelectedDate(null);
            setFoucused(false)
            dispatch({ type: "ADD_TASKS", payload })
        })
     }

return (
    <form onSubmit={e => {
        e.preventDefault(e.target.value);
        addTask();
    } }>
        <input className="input-group-prepend" value={task} placeholder="Enter your Task" onChange={e => setTask(e.target.value)} />
        <SingleDatePicker
        date={selectedDate} 
        onDateChange={date => setSelectedDate(date)} 
         focused={focused} 
         onFocusChange={ focused  => setFoucused( {focused: false} )} 
  
        />
        <br/>
        <input className="btn btn-primary" type='submit' value='Submit' />
    </form>
);
};
export default AddTasks;

然后是我的任务

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import AddTasks from './AddTasks';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import database from '../firebase/firebase';
import uuid from 'react-uuid';

const TaskItem = (props) => {
    const dispatch = useDispatch();
    const [task, setTask] = useState(props.task);
    const [index, setIndex] = useState(props.index);
    const [selectedDate, setSelectedDate] = useState(null);
    const [editing, setEditing] = useState(false);
    const [currentTask, setCurrentTask] = useState({});
    const date = new Date()
    const userId = useSelector(state => state.auth.uid);

    const saveTask = () => {
        setEditing(false);
        const payload = { id: currentTask.id, text: currentTask.text, completed: false,  addedAt: selectedDate }
        const dbtasksWrapper = database.ref().child(userId).child('tasks');
        dbtasksWrapper.child(payload.id).update(payload).then(() => {
            dispatch({ type: "ADD_TASKS", payload });
        })
    }

    const completeTask = () => {
        const payload = { id: task.id, text: task.text, completed: true, addedAt: task.addedAt }
        const dbtasksWrapper = database.ref().child(userId).child('tasks');
        dbtasksWrapper.child(payload.id).update(payload).then(() => {
            dispatch({ type: 'COMPLETE_TASK', payload })
        })
    }

    const removeTask = (id) => {
        console.log(id);
        const dbtasksWrapper = database.ref().child(userId).child('tasks');
        dbtasksWrapper.child(id).remove().then(() => {
            dispatch({ type: 'REMOVE_TASK', id: id })
            console.log('removed');
        })
    }

    const editTask = (task) => {
        setCurrentTask(task);
        setEditing(true);
    }

    useEffect(() => {
        setTask(props.task);
        setIndex(props.index);
    }, [props])


    return (

        <li
            index={index}
            key={task.id}
            style={{
                textDecoration: !task.completed ? 'inherit' : 'line-through'
            }}
        >
            <div>
                {
                    !task.completed ? <p></p> : <p className="alert alert-danger" >Task Completed </p>

                    // <div>
                    //     {/* {Object.values(task.completed.toString()).length }  */}
                    // </div>
                }
            </div>
            <div className="border">
                {editing ?
                    <div>
                        <input type='text' onChange={e => setCurrentTask({ ...currentTask, text: e.target.value })} value={currentTask.text} />

                        <DatePicker
                            className="input-group-prepend"
                            placeholderText="Enter task date "
                            selected={selectedDate}
                            onChange={(date) => setSelectedDate(date)}
                            minDate={date}
                        />
                    </div>
                    :

如果日期是当前日期，那么这应该显示在今天任务中

                    <div>
                        <h3> {task.text} </h3>
                        <p>{task.addedAt && task.addedAt.toString()}</p>
             
                    </div>
                }

                {editing ?
                    <div>
                        <input type='button' className='btn btn-primary' onClick={() => saveTask(task.id)} value='Save Task' />
                        <input type='button' className='btn btn-link' onClick={() => setEditing(false)} value='Cancel' />
                    </div>

                    :
                    <div>
                        <input className="btn btn-info btn-sm" type='button' value='CompleteTask' onClick={() => completeTask(task.id)} />
                        <input className="btn btn-danger btn-sm" type='button' value='Remove Task' onClick={() => removeTask(task.id)} />
                        <input type='button' className="btn btn-primary" onClick={() => editTask(task)} value='Edit Task' />
                        </div>
                }
            </div>
        </li>
    )
}

export default TaskItem;

和我的今日任务；

import React from 'react';
import { useSelector } from 'react-redux';
import AddTasks from '../components/AddTasks';
import TaskItem from './TaskItem';
import Header from './Header';

我认为日期有问题或需要从 taskitem 获取数据，但我正在这样做，它什么都不显示

function isToday(date) {
  var currentDate = new Date();
  try {
    return (
      date.getFullYear() === currentDate.getFullYear() &&
      date.getMonth() === currentDate.getMonth() &&
      date.getDate() === currentDate.getDate()
    )
  } catch { }
  return false;
}

export default function Today() {
  const tasks = useSelector(state => state.tasks);

  if (tasks) {
    return (
      <div>
        <h1>Today</h1>
        <AddTasks />
        {Object.values(tasks).map((task, index) => {
          var isTodayTask = isToday(task.addedAt);
         
          console.log(isTodayTask);
          return (
            <ul>
              {isTodayTask ? (
                <div>
                  <TaskItem
                    task={task}
                    index={index}
                  />
                </div>
              ) : (
                  <div>
                    
                  </div>
                )}
            </ul>
          )
        })}
      </div>
    )
  } else {
    return (
      <div>
        <h1>Today</h1>
        <AddTasks />
        <div>You have no tasks</div>
      </div>
    )
  }
}

标签： javascriptreactjsreact-redux

javascript - 如果我的任务日期是当前的，那么它会在我的今天任务中显示任务

问题描述

解决方案

推荐阅读