redux-form 和 react 小部件的日历 - String 类型的无效道具值
redux-form and react widgets' calendar - invalid prop value of type String
我想使用 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>
);
}
});
但是我的控制台中弹出以下错误,如何防止它们出现?
看起来警告来自反应小部件日历源上的道具验证,除非您想修改源,否则您无能为力。此外,此警告仅在开发模式下显示,如果您将代码打包用于生产,则不应看到任何此类警告
找到解决方案,日历小部件的文档说
The current selected date, should be a Date object or null.
所以我使用了一个 redux-form git-hub issues for datepicker
的解决方案
FormDatepicker : ({input}) => {
const selected = input.value ? new Date(input.value) : null;
return (<Calendar {...input} value={selected} /> );
}
我想使用 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>
);
}
});
但是我的控制台中弹出以下错误,如何防止它们出现?
看起来警告来自反应小部件日历源上的道具验证,除非您想修改源,否则您无能为力。此外,此警告仅在开发模式下显示,如果您将代码打包用于生产,则不应看到任何此类警告
找到解决方案,日历小部件的文档说
The current selected date, should be a Date object or null.
所以我使用了一个 redux-form git-hub issues for datepicker
的解决方案FormDatepicker : ({input}) => {
const selected = input.value ? new Date(input.value) : null;
return (<Calendar {...input} value={selected} /> );
}