zent/src/form/demos/15.submit.md

一套前端设计语言和基于React的实现

---
order: 15
zh-CN:
	title: 表单提交
	name: 姓名
	submit: 提交
	beforeSubmit: 在onSubmit触发之前，表单已校验通过
	returnOfOnSubmit: onSubmit可以返回一个Promise，onSubmitSuccess会在其resolve之后调用
	onSubmitFail: 校验失败 或 onSubmit抛出错误时会调用onSubmitFail
	success: 表单提交成功
	fail: 校验似乎出了点问题
en-US:
	title: Form Submit
	name: Name
	submit: Submit
	beforeSubmit: The form is valid when onSubmit called
	returnOfOnSubmit: If the return of onSubmit is a Promise, onSubmitSuccess will be called when the Promise resolved
	onSubmitFail: onSubmitFail will be called when validation failed or onSubmit throw an error
	success: Submit successfully
	fail: There might be some wrong in validation
---

```jsx
import { Form, FormStrategy, Notify, FormInputField } from 'zent';

function App() {
	const form = Form.useForm(FormStrategy.View);
	const onSubmit = React.useCallback(form => {
		// {i18n.beforeSubmit}
		const value = form.getValue();

		// {i18n.returnOfOnSubmit}
		return new Promise(resolve => {
			setTimeout(resolve, 1000);
		});
	}, []);
	const onSubmitSuccess = React.useCallback(() => {
		Notify.success('{i18n.success}');
	}, []);
	const onSubmitFail = React.useCallback((error) => {
	  console.log(error);
		Notify.error('{i18n.fail}...');
	}, []);

	return (
		<Form
			form={form}
			layout="horizontal"
			onSubmit={onSubmit}
			onSubmitSuccess={onSubmitSuccess}
			onSubmitFail={onSubmitFail}
		>
			<FormInputField name="name" label="{i18n.name}：" required />
			<Button htmlType="submit" type="primary">
				{i18n.submit}
			</Button>
		</Form>
	);
}

ReactDOM.render(<App />, mountNode);
```