Javascript TypeError:无法读取属性'；名称'；受控元件中未定义的错误

我试图通过受控组件获取一个日期作为用户输入，但总是遇到这样的错误“TypeError:无法读取未定义的属性'name'。这是导致错误的一段代码。我正在使用

react datepicker

模块获取日期输入，就像我尝试使用HTML输入时一样

type=“Date”

我无法禁用以前的日期

import React, {Fragment,useState,useEffect} from 'react';
import {Link,withRouter} from 'react-router-dom';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import PropTypes from 'prop-types';
import {connect} from 'react-redux'; 
import {addTask} from '../../actions/task';
import { addDays } from 'date-fns';

const TaskForm = ({addTask}) => {
    const [formData,setFormData] = useState({
        description:'',
        due_at:'',
        toBeReminded:''
    })

    const onSubmit = e => {
        e.preventDefault();
        addTask(formData);
    }

    const onChange = e=>setFormData({...formData, [e.target.name]:e.target.value})
    const {description,due_at} = formData;
    return (
        <Fragment>
            <h1 className="large text-primary">
                New Task
            </h1>
            <form className="form my-1" onSubmit={e=>onSubmit(e)}>
                <div className="form-group">
                    <label htmlFor="descr">Description:</label><br/>
                    <input type="text" id="descr" placeholder="Task Description" name="description" value={description} onChange={e=> onChange(e)}/>
                </div>
                <div className="form-group">
                    <label htmlFor="due_date">Due Date for Task:</label><br></br>
                    <DatePicker id="due_date" minDate={addDays(new Date(), 1)} id="due_date" name="due_at" value={due_at} onChange={e=> onChange(e)} />
                </div>
                <div className="form-group">
                    <label htmlFor="reminder">Set Reminder:</label><br></br>
                    <input type="radio" id="yes" name="toBeReminded"  value="true" onClick={e=> onChange(e)}/>
                    <label htmlFor="yes">Yes</label><br/>
                    <input type="radio" id="no" name="toBeReminded" value="false" onClick={e=> onChange(e)}/>
                    <label htmlFor="no">No</label><br></br> 
                </div>
                <input type="submit" className="btn btn-dark my-1" value="Submit" />
                <Link className="btn btn-light my-1" to="/tasks">Go Back</Link>
            </form>
        </Fragment>
    )
}

TaskForm.propTypes = {
    addTask:PropTypes.func.isRequired
}

export default connect(null,{addTask})(TaskForm);

import React，{Fragment，useState，useffect}来自'React'；
从“react router dom”导入{Link，withRouter}；
从“反应日期选择器”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
从“道具类型”导入道具类型；
从'react redux'导入{connect}；
从“../../actions/task”导入{addTask}；
从'date fns'导入{addDays}；
const TaskForm=（{addTask}）=>{
常量[formData，setFormData]=useState({
说明：“”，
到期日：''，
注意：''
})
const onSubmit=e=>{
e、 预防默认值（）；
addTask（formData）；
}
const onChange=e=>setFormData（{…formData[e.target.name]：e.target.value}）
常量{description，due_at}=formData；
返回(
新任务
onSubmit（e）}>
说明：

onChange（e）}/>
任务的截止日期：


onChange（e）}/>
设置提醒：


onChange（e）}/>
是

onChange（e）}/>
否


回去
)
}
TaskForm.propTypes={
addTask:PropTypes.func.isRequired
}
导出默认连接（null，{addTask}）（TaskForm）；

查看文档，它看起来不像它的

onChange

接收到事件，而是日期

您应该为日期更改处理程序使用单独的处理程序，因为它们需要不同的签名

const onChange = e => setFormData({...formData, [e.target.name]:e.target.value})
const onDateChange = date => setFormData({...formData, due_at: date})

如果您真的想坚持使用一个变更处理程序，那么还有很多其他的解决方案可以使用，但我建议您只创建两个类似上面的解决方案

但是。。你可以这样做（我不推荐）：

const onChange=e=>{
如果（类型e===‘对象’）{
setFormData（{…formData，[e.target.name]：e.target.value}）
}否则{
setFormData（{…formData，到期日：e}）
}
}

或者，由于您已经声明了新的内联函数（顺便说一句，这是不必要的，除非您使用以下方法，否则只需执行

onChange={onChange}

），您可以这样做：

const onChange=（name，value）=>setFormData（{…formData[e.target.name]：e.target.value}）
//定期投入
onChange={e=>onChange（'input name'，e.target.value）}
//日期输入
onChange={date=>onChange（'input name'，date）}

---

底线是：您必须注意一旦更改将收到什么。它将根据输入类型或库实现而有所不同。

这意味着

e.target

未定义。在

onChange

函数中尝试

console.log（e）

，尝试识别未定义的部分。我知道这一部分，但我尝试了各种方法，但都没有成功。为什么在DatePicker组件中使用时无法识别它？请尝试将其分解。首先，你有活动吗。

console.log（e）

返回什么？得到以下信息：SyntheticEvent{dispatchConfig:{…}，\u targetist:FiberNode，nativeEvent:InputEvent，键入：“change”，目标：input#descr，…}