0

我试图通过受控组件获取日期作为用户输入，但总是遇到此错误“TypeError：无法读取未定义的属性'名称'”。这是导致错误的一段代码。我正在使用该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);
4

1 回答 1

1

查看文档react-datepicker，它看起来不像onChange接收事件，而是接收日期。

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

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

如果您真的想坚持一个更改处理程序，还有很多其他解决方案可以工作，但我建议只创建两个像上面这样。

但是..你可以做这样的事情（我真的不推荐这个）：

const onChange = e => {
  if (typeof e === 'object') {
    setFormData({...formData, [e.target.name]:e.target.value})
  } else {
    setFormData({...formData, due_at: e})
  }
}

或者，由于您已经声明了新的内联函数（顺便说一句，这是不必要的，onChange={onChange}除非您使用以下方法，否则就这样做）您可以这样做：

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

// Regular inputs
onChange={e => onChange('input name', e.target.value)}

// Date input
onChange={date => onChange('input name', date)}

底线是：您必须注意onChange预期会收到什么。它将根据输入类型或库实现而有所不同。

于 2020-02-18T17:51:02.750 回答