我有tcomb-form的问题。 在我的tcomb-form中,我声明了一个具有DateInput(@ blueprintjs / datetime)组件的工厂。
但是当我得到表格的价值时。该输入字段未定义。看起来tcomb-form无法从我的DateInput组件中获取值。
这是代码。
this.state = {
currentDate: new Date()
};
const Type = t.struct({
invoiceDate: t.maybe(t.String),
});
const formOption = {
fields: {
invoiceDate: {
factory: l =>
this.DateInputField({ ...l, getBundleById, currentDate }),
attrs: {
className: 'pt-input',
},
error: 'error text'
}
}
};
handleDateInputChange = (date, locals) => {
this.setState({
currentDate: date
}, () => {
console.log('this.state.currentDate: ', this.state.currentDate);
locals.onChange(this.state.currentDate);
});
};
DateInputField = (locals) => {
// console.log('locals: ', locals);
return (<div>
<label className="pt-label garage-info__label" htmlFor="invoiceDate">Invoice Date: </label>
<DateInput value={locals.currentDate} onChange={date => this.handleDateInputChange(date, locals)} />
</div>);
};
My form:
<form className="col-xs-12" onSubmit={onUploadInvoice}>
{
!isSuccess &&
<TcombContainer
type={Type}
values={{
invoiceDate: currentDate
}}
options={formOption}
onChange={onChangeUploadInvoice}
/>
}
{
isError &&
<div className="pt-callout pt-intent-danger">
{ isError.message }
</div>
}
{
isRequest &&
<div className="pt-callout pt-intent-warning">
<span>{ getBundleById('CARENET.ASSIGNMENT.EDIT.UPLOAD.REQUEST') }</span>
</div>
}
{
(!isRequest && !isSuccess) &&
<div className="text-center">
<button type="submit" className="pt-button pt-large pt-intent-success">
{getBundleById('CARENET.ASSIGNMENT.EDIT.FORM.TYRES.SUBMIT_BUTTON')}
</button>
</div>
}
</form>