zent/src/form/demos/12.preview.md

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

---
order: 12
zh-CN:
  title: 实时预览
	name: 姓名
	phone: 电话
	address: 联系地址
	nickname: 昵称
en-US:
	title: Realtime preview
	name: Name
	phone: Phone
	address: Address
	nickname: Nickname
---

```jsx
import {
	FormInputField,
	Form,
	FormStrategy,
	FieldSet,
	FormControl,
	Icon,
	Input,
	FieldUtils,
} from 'zent';

const NicknamesPreview = () => {
	const children = Form.useFieldArrayChildModels('nickname');
	if (!children) {
		return null;
	}
	return (
		<div className="form-demo-11-preview-nickname">
			<label>{'{i18n.nickname}：'}</label>
			{children.map((child, index) => (
				<Form.FieldValue key={index} model={child}>
					{value => `${value} `}
				</Form.FieldValue>
			))}
		</div>
	);
};

const Preview = () => (
	<div className="form-demo-11-preview">
		<Form.FieldValue name="name">{value => <h3>{value}</h3>}</Form.FieldValue>
		<Form.FieldSetValue name="contact">
			<div className="form-demo-11-preview-phone">
				<label>{'{i18n.phone}：'}</label>
				<Form.FieldValue name="phone" />
			</div>
			<div className="form-demo-11-preview-address">
				<Form.FieldValue name="address" />
			</div>
		</Form.FieldSetValue>
		<NicknamesPreview />
	</div>
);

const Nickname = ({ model: propsModel, last, add, del }) => {
	const model = Form.useField(propsModel);
	const onChange = useCallback(
		e => {
			model.value = e.target.value;
		},
		[model]
	);
	return (
		<div className="form-demo-11-nickname">
			<Input
				{...FieldUtils.useCompositionHandler(model)}
				onChange={onChange}
				value={model.value}
			/>
			<Icon type="close-circle" style={{ color: '#da2626' }} onClick={del} />
			{last && (
				<Icon type="plus-circle" style={{ color: '#4cb35d' }} onClick={add} />
			)}
		</div>
	);
};

const Nicknames = () => {
	const model = Form.useFieldArray('nickname', [], ['']);
	const add = () => model.push('');
	const del = index => model.splice(index, 1);

	return (
		<FormControl label="{i18n.nickname}">
			{model.children.map((child, index) => (
				<Nickname
					key={index}
					model={child}
					last={model.children.length === index + 1}
					add={add}
					del={() => del(index)}
				/>
			))}
		</FormControl>
	);
};

const Edit = () => (
	<div>
		<FormInputField label="{i18n.name}" name="name" />
		<FieldSet name="contact">
			<FormInputField label="{i18n.phone}" name="phone" />
			<FormInputField label="{i18n.address}" name="address" />
		</FieldSet>
		<Nicknames />
	</div>
);

function App() {
	const form = Form.useForm(FormStrategy.View);
	return (
		<Form form={form} layout="vertical" className="form-demo-11">
			<Preview />
			<Edit />
		</Form>
	);
}

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

<style>
	.form-demo-11 {
		display: flex;

		&-preview {
			padding: 15px;
    	width: 230px;
			margin: 20px;
    	height: 90px;
    	border-radius: 5px;
			background-size: 100% 100%;
    	background-image: url("https://img.yzcdn.cn/public_files/2019/03/11/704e415d887541d2bf9ce945483af305.png!middle.webp");
			display: flex;
			flex-direction: column;

			h3 {
				color: #ffd700;
				min-height: 30px;
				text-align: right;
				font-size: 16px;
			}

			&-address {
				color: #333;
				font-size: 10px;
				margin-top: auto;
			}

			&-phone {
				text-align: right;
				color: #c0c0c0;
				font-size: 12px;
			}

			&-nickname {
				color: #333;
				font-size: 12px;
				margin-bottom: 5px;
			}
		}

		&-nickname {
			display: flex;
			align-items: center;

			&:not(:first-child) {
				margin-top: 16px;
			}
			
			.zenticon {
				margin-left: 5px;
				cursor: pointer;
			}
		}
	}
</style>