---
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 (
{children.map((child, index) => (
{value => `${value} `}
))}
);
};
const Preview = () => (
{value => {value}
}
);
const Nickname = ({ model: propsModel, last, add, del }) => {
const model = Form.useField(propsModel);
const onChange = useCallback(
e => {
model.value = e.target.value;
},
[model]
);
return (
{last && (
)}
);
};
const Nicknames = () => {
const model = Form.useFieldArray('nickname', [], ['']);
const add = () => model.push('');
const del = index => model.splice(index, 1);
return (
{model.children.map((child, index) => (
del(index)}
/>
))}
);
};
const Edit = () => (
);
function App() {
const form = Form.useForm(FormStrategy.View);
return (
);
}
ReactDOM.render(, mountNode);
```