我正在使用Redux-Form,并且正在尝试在用户单击提交时获取表单值。
这些是外形道具。如您所见,有提交功能:
- 提交
- 提交成功
- 提交失败
onSubmitSucess
并且onSubmitFail
永远不会被调用。onSubmit
被调用但没有参数。
我想要的只是获取表单值,以便我可以将它们发布到 API。
我怎样才能做到这一点?
编辑(代码)
AutoFormInternal.js
class AutoFormInternal extends Component {
render() {
let {
componentFactory,
fields,
fieldMetadata,
layout,
handleSubmit,
submitting
} = this.props;
let model = this.props.values;
let fieldMetadataEvaluated = metadataEvaluator.evaluate(fieldMetadata, model, '', fields);
let groupComponent = componentFactory.buildGroupComponent({
component: layout.component,
layout: layout,
fields: fieldMetadataEvaluated,
componentFactory: componentFactory
});
return (
<div className="meta-form">
<form onSubmit={handleSubmit}>
{ groupComponent }
<ButtonToolbar>
<Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
<Button disabled={submitting}>Cancel</Button>
</ButtonToolbar>
</form>
</div>
)
}
}
AutoFormInternal.propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
resetForm: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
componentFactory: PropTypes.object.isRequired,
entity: PropTypes.object.isRequired,
layout: PropTypes.object
};
export default reduxForm({
form: 'simple'
})(AutoFormInternal);
AutoForm.js
class AutoForm extends Component {
render() {
let {entity, layout} = metadataProvider.getEntityAndLayout(this.props.schema, this.props.entityName, this.props.layoutName);
let componentFactory = this.props.componentFactory;
let fieldMetadata = metadataProvider.getFields(this.props.schema, entity, layout, f => {
f.componentFactory = componentFactory;
});
let fields = metadataProvider.getReduxFormFields(fieldMetadata);
let validate = (values) => {
return metadataValidator.validate(fieldMetadata, values);
}
return <AutoFormInternal
fields={fields}
fieldMetadata={fieldMetadata}
entity={entity}
layout={layout}
validate={validate}
componentFactory={componentFactory}
onSubmit={() => console.log('submit')}
onSubmitSuccess={() => console.log('submit success')}
onSubmitFail={() => console.log('submit fail')}
/>
}
}
AutoForm.propTypes = {
componentFactory: PropTypes.object.isRequired,
schema: PropTypes.object.isRequired,
entityName: PropTypes.string.isRequired,
layoutName: PropTypes.string.isRequired
};
export default AutoForm;