zent/src/form/demos/17.form-context.md

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

---
order: 17
zh-CN:
	title: 表单上下文
	name: 姓名：
	contact: 联系方式：
en-US:
	title: Form Context
	name: "Name: "
	contact: "Contact: "
---

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

function Component() {
	const form = Form.useForm(FormStrategy.View);
	return (
		<Form layout="horizontal" form={form}>
			<FormContext.Provider
				value={{ labelStyle: { flexBasis: 80, justifyContent: 'flex-start' } }}
			>
				<FormInputField name="name" label="{i18n.name}" />
				<FormInputField name="contact" label="{i18n.contact}" />
			</FormContext.Provider>
		</Form>
	);
}

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

<style>
.demo-form-basic-email {
	margin-left: 5px;
}
</style>