redux-form和react小部件的日历 - String类型的无效prop值

时间:2016-09-19 18:59:36

标签: javascript reactjs redux redux-form

我想使用react-widgets日历作为开始日期和结束日期的输入, 最简单的实现工作:

const TripValidationForm = React.createClass({


FormDatepicker : ({input}) => {
    return (<Calendar {...input} /> );
},
onSubmit : function(formData) {
  const uid = this.props.auth.uid;
    this.props.createTrip(formData, uid);
},
render : function() {
    const {handleSubmit, submitting, feedback} = this.props;
return (
    <div>
        <form onSubmit={handleSubmit(this.onSubmit)} className="form-home">
            <fieldset>
                <Field name="startdate" valueField="value" component={this.FormDatepicker} />
                <Field name="enddate" valueField="value" component={this.FormDatepicker}/>
            </fieldset>
            <p className="error">{feedback.msg}</p>
            <button type="submit" className="btn btn-black" disabled={submitting}>Submit</button>
        </form>
    </div>
);
}
});

但是,我的控制台中出现以下错误,我怎么能阻止它们出现?

enter image description here

enter image description here

enter image description here

enter image description here

2 个答案:

答案 0 :(得分:0)

看起来警告来自反应小部件日历源上的道具验证,除非您想要修改源,否则您无法做多少。此警告仅在开发模式下显示,如果您将代码捆绑生产,则不应看到任何此警告

答案 1 :(得分:0)

找到解决方案,日历小部件的文档说

  

当前所选日期应为Date对象或null。

所以我使用了针对datepicker的一个redux-form git-hub问题的解决方案

FormDatepicker : ({input}) => {
    const selected = input.value ? new Date(input.value) : null;
    return (<Calendar {...input} value={selected}  /> );
}