zent/src/form/demos/21.subscribe-model.md

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

---
order: 21
zh-CN:
	title: 通过 Model 订阅数据
	name: 姓名：
	contact: 联系方式：
en-US:
	title: Subscribe data from model
	name: "Name: "
---

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

function PreviewName({ form }) {
	const name = Form.useFieldValue(form.model.get('name'));

	return (
		<p>
			{i18n.name}
			{name}
		</p>
	);
}

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}" />
				</FormContext.Provider>
			</Form>
			<PreviewName form={form}></PreviewName>
		</>
	);
}

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