reactjs - api put 调用中 react/redux 表单中的 Datepicker 字段

Question

嘿，我是 react 新手，我需要在我的 react redux 表单中实现一个日期选择器，我可以选择日期但是当我提交表单时没有向相应字段添加任何值，我尝试了很多东西但无法计算出来 。ps：我有一个名为“useForm”的单独组件，其中包含表单的handleInputChange和其他必需的方法，我通过钩子功能使用它。

表单组件：

import React,{useState, useEffect} from "react";
import { connect } from "react-redux";
import { Grid,TextField, withStyles,Button,MenuItem,Select,InputLabel,FormControl } from "@material-ui/core";
import useForm from "../useForm";
import * as actions from "../../actions/dTask";
import * as wactions from "../../actions/dWorkflow";
import { useToasts } from "react-toast-notifications";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from 'moment';
import { parseISO, format } from 'date-fns';
import MomentLocaleUtils, {
    formatDate,
    parseDate,
  } from 'react-day-picker/moment';

const styles = theme => ({
    root: {
        '& .MuiTextField-root': {
            margin: theme.spacing(2),
            minWidth: 230,
        }
    },
    formControl: {
        margin: theme.spacing(1),
        minWidth: 230,
    },
    smMargin: {
        margin: theme.spacing(1)
    }

   
})

const initialFieldValues = {
    idtask : '',
    taskTitle : '',
    taskStatus : '',
    begin : '',
    deadline : '',
    attachement : '',
    idworkflow :'',
    idconditionvalue:''

}

const TaskForm = ({classes, ...props}) => {

    const [selectedDate, setSelectedDate] = useState(null)

    

    //material-ui select
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() => {
        setLabelWidth(inputLabel.current.offsetWidth);

    }, []);

     //Toast
     const {addToast} = useToasts()

    //not understood
    const validate = (fieldValues = values) => {
        let temp = {}
        if ('taskTitle' in fieldValues)
            temp.taskTitle = fieldValues.taskTitle ? "" : "This field is required."

        setErrors
            ({
                ...temp
            })
        if (fieldValues == values)
            return Object.values(temp).every(x => x == "")
    }

    const {
        values ,
        setValues,
        errors,
        setErrors,
        handleInputChange,
        resetForm
      

    }= useForm(initialFieldValues,validate,props.setCurrentId)

     const handleSubmit =  (e) => {
      
        if(validate())
        {e.preventDefault()
            const onSuccess = () => {
                
                resetForm()
                addToast("Submitted Successfully", { appearance: 'success' })
            }

            if (props.currentId == 0)
            props.createTask(values,onSuccess)

            

            
            
            else 
            props.updateTask(props.currentId,values,onSuccess)
        }
        console.log(values)
    }


    useEffect(() => {
        props.fetchallWorkflows()

       
        //console.log(props)
            setValues({
                ...props.taskList.find(x => x.idtask === props.currentId)
                
            })
            setErrors({})
        
    }, [props.currentId])

   
    const handleChange = date => {
        
       const d = moment(date).format("DD-MM-yyyy")
        setSelectedDate(date)
        console.log(d)

        
    };

    return ( 
        <form align="center" autoComplete="off" noValidate  className={classes.root}  onSubmit={handleSubmit}>
            <Grid container>
                <Grid item xs={12}>
                    <TextField
                        name="taskTitle"
                        variant="outlined"
                        label="taskTitle"
                        value={values.taskTitle}
                        onChange={handleInputChange}
                        
                    />
                    <TextField
                        name="taskStatus"
                        variant="outlined"
                        label="taskStatus"
                        value={values.taskStatus}
                        onChange={handleInputChange}
                      
                    />

                    {/* <TextField

                        name={moment(selectedDate).format("DD-MM-yyyy")}
                        variant="outlined"
                        label="begin"
                        value={moment(selectedDate).format("DD-MM-yyyy")}
                        onChange={handleInputChange}

                    /> */}

                    <DatePicker

                        name="begin"
                        label="begin"
                        value={selectedDate}
                        selected={selectedDate}
                        onChange={handleChange}
                        dateFormat="dd-MM-yyyy"

                    />

             

                    

                    <div>
                        <FormControl variant="standard"
                            className={classes.formControl}

                        >
                            <InputLabel ref={inputLabel}>Choose Workflow </InputLabel>
                            <Select
                                name="idworkflow"
                                value={values.idworkflow}
                                label="idworkflow"
                                onChange={handleInputChange}
                                labelWidth={labelWidth}
                            >
                                <MenuItem value="select workflow">Select Workflow</MenuItem>

                                {props.workflowList.map((record) => {
                                    return (

                                        <MenuItem value={record.idworkflow}>{record.workflowTitle}</MenuItem>)
                                })
                                }

                            </Select>

                           
                            
                               
                            
                          
                        

                        </FormControl>
                        
                    

                        
                    </div>
            
            
            
                    <div>
                        <Button
                            variant="contained"
                            color="primary"
                            type="submit"
                            className={classes.smMargin}
                            
                        >
                            Submit
                        </Button>
                        <Button
                            variant="contained"
                            className={classes.smMargin}
                            onClick={resetForm}
                           
                        >
                            Reset
                        </Button>
                    </div>
                </Grid>

              
                </Grid>
            
                </form>
     );
}

const mapStateToProps = state => ({
    
    taskList : state.TaskReducer.list,
    workflowList : state.WorkflowReducer.list

})

const mapActionToProps = {
createTask : actions.create,
updateTask : actions.update,
fetchallWorkflows : wactions.fetchAllWorkflows
}

 
export default connect(mapStateToProps, mapActionToProps) (withStyles(styles) (TaskForm));
 

使用表格：

import React, { useState, useEffect } from "react";

const useForm = (initialFieldValues,validate,setCurrentId) => {
    const [values, setValues] = useState(initialFieldValues)
    const [errors, setErrors] = useState({})

    const handleInputChange = e => { 
        
        const { name, value } = e.target
        const fieldValue ={[name]:value}
        setValues({
            ...values,
            ...fieldValue
        }) 
        validate(fieldValue)
        
        
    }

    const resetForm = () => {
        setValues({
            ...initialFieldValues
        })
        setErrors({})
        setCurrentId()
    }

    

    return {
        values,
        setValues,
        errors,
        setErrors,
        handleInputChange,
        resetForm
    };
}

export default useForm;

标签： reactjsformsapireduxdatepicker