javascript - 如何获取 parentNode id，同时使用 react.js 中的“react-date-picker”和使用“react-bootstrap-time-picker”插件更改日期？

Question

我正在创建一个任务列表，对于每个任务，都会有一个对象。它存储在一个数组中，在更改时我必须更新所有值，形成文本字段，我可以更改值，但是对于 datepicker 输入框，我无法获取 parentNode Id，因为我无法获取事件参数。我在“react-bootstrap-time-picker”中遇到了同样的问题。

创建-task.js

import React, {useEffect, useState} from "react";
    import store from "../redux/store";
    import actions from "../redux/actions";
    import '../styles/create-task.scss';
    import {useSelector} from "react-redux";
    import TaskTemplate from "./task-template";
    import SaveTemplate from "./save-template";
    const CreateTask=()=> {
        // const [templates, setTemplates]=useState([]);
        const onTaskCreate = () => {
            store.dispatch({type: actions.ON_CREATE_TASK, payload: {'taskCount':taskCount + 1,'save':false}})
            addTemplate();
            store.dispatch({type:actions.ON_ADD_TEMPLATES, payload:template});
        }
        const createTask = useSelector(({reducers}) => {
            const {taskCount, taskDetails,save,templates} = reducers;
            return {taskCount, taskDetails,save, templates};
        });
        const {taskCount, taskDetails,save,templates} = createTask;
        const {userData}=taskDetails;
        const globalTemplates=createTask.templates;
        let template = globalTemplates;
        const addTemplate = () => {
                template.push(<div key={`template${taskCount}`} id={`task${taskCount+1}`}><TaskTemplate/></div>);
            return template;
        }
        useEffect(()=>{
            // setTemplates(globalTemplates)
        },[])
    
        return (
            <div>
                <div className={"create-task"}>
                    <div>TASKS <span className={"task-count"}> {taskCount} </span></div>
                    <div className={"add-task-button"} onClick={onTaskCreate}>
                        <button>+</button>
                    </div>
                </div>
                {templates && templates.map((template)=>template)}
                {/*{save?<SaveTemplate/>:templates.map((template)=> template)}*/}
            </div>
        )
    }
    
    export default CreateTask;

任务.js

import React, {useEffect, useState} from "react";
    import store from "../redux/store";
    import actions from "../redux/actions";
    import DatePicker from 'react-date-picker';
    import {useSelector} from "react-redux";
    import TimePicker from 'react-bootstrap-time-picker';
    import {wrapMapToPropsConstant} from "react-redux/lib/connect/wrapMapToProps";
    const TaskTemplate=(props)=>{
        const [dateValue, dateChange] = useState(new Date());
        const [time, timeChange] = useState('10:00');
       
        const tasks = useSelector(({reducers}) => {
            const { taskDetails,edit, createTask} = reducers;
            return {taskDetails, edit, createTask};
        });
        const{edit,taskDetails,createTask}=tasks;
       
        const onFieldChange=(e)=>{
            let editingTaskId=e.target.parentNode.parentNode.getAttribute("id");
            editingTaskId=editingTaskId.split("task")[1]-1;
            createTask.map((data,index)=>{
                if(index === editingTaskId){
                    createTask[editingTaskId]["userData"][e.target.name]=e.target.value;
                }
            })
        }
        const dateChangeFormat = (val) =>{
            var splitDate=val.toLocaleString('hu-HU').substr(0,12);
            splitDate=splitDate.replaceAll(" ","").replaceAll(".","-");
            return splitDate;
        }
        
        return(
            <>
                    <div>
                        <label>Task Description</label>
                        <input name={"task_msg"}  defaultValue={ props.task && props.task.task_msg && props.task.task_msg } onChange={(e)=>{onFieldChange(e)}}/>
                    </div>
                    <div>
                    <label>Date</label>
                    <DatePicker
                    onChange={onDateChange}
                    value={props.task?props.task.original_date:dateValue}
                    format={"y-MM-dd"}
                    name={"task_date"}
                    clearIcon={""}
                    />
                    </div>
                    <div>
                    <label>Time</label>
                    <TimePicker start="10:00" end="21:00"  step={30} onChange={onTimeChange} value={props.task?props.task.task_time:time} />
                    </div>
                    <div>
                    <label>Assign User</label>
                    <input name={"assigned_user"} defaultValue={ props.task && props.task.task_msg && props.task.assigned_user} onChange={(e)=>{onFieldChange(e)}}/>
                    </div>
                <div>
                    <button onClick={(e)=>onFormSave(e)}> Save </button>
                </div>
            </>
        )
    }
    
    export default TaskTemplate;

减速器。js

import actions from "./actions";
const stateInit={
    taskCount:0,
    taskDetails:[],
    templates:[],
    createTask:[],
    userData: {
            task_msg: '',
            task_date: '',
            task_time: 36000,
            assigned_user: '',
            time_zone: new Date().getTimezoneOffset(),
            is_completed: 0,
        }

};
export default function tasks(state=stateInit, action){
    switch (action.type){
        case actions.ON_CREATE_TASK:{
            const {taskCount,save}=action.payload;
            return {
                ...state,
                taskCount: taskCount,
                save:save,
                createTask: [...state.createTask,{userData:{...state.userData}}],
            }
        }
        case actions.ON_VALUE_CHANGE:{
            return {
                ...state,
                createTask: action.payload,
            }
        }

        case actions.ON_ADD_TEMPLATES:{
            return{
                ...state,
                templates: action.payload,
            }
        }
       
        default:{
            return {
                ...state
            }
        }
    }

}

标签： javascriptreactjsreact-reduxtimepickerreact-datepicker