我正在尝试开始使用 mobx-react-forms,但遇到了错误:
Unhandled Rejection (Error): Validation Error: Invalid Field Instance
-> const form = new Form();
这是我的代码:
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Form as BaseForm } from 'mobx-react-form';
import validatorjs from 'validatorjs';
class Form extends BaseForm{
plugins() {
return { dvr: validatorjs };
}
setup(){
return {
fields: [{
name: 'amount',
label: 'Amount',
}]
}
}
hooks(){
return {
onSuccess(form) {
alert('Form is valid! Send the request here.');
// get field values
console.log('Form Values!', form.values());
},
onError(form) {
alert('Form has errors!');
// get all form errors
console.log('All form errors', form.errors());
}
};
}
}
@observer
class PaymentForm extends Component {
render() {
const form = new Form();
return (
<div>
<h2>Payment Form</h2>
<form onSubmit={form.onSubmit}>
<label>
{form.$('amount').label}
<input {...form.$('amount').bind()} />
<p>{form.$('amount').error}</p>
</label>
</form>
</div>
)
}
}
export default PaymentForm;