zent/src/form/demos/14.interact.2.md

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

---
order: 14
zh-CN:
  title: 字段值交互
en-US:
  title: Fields Value interact
---

```jsx
import { useEffect } from 'react';
import {
	Form,
	NumberInput,
	Radio,
	FormStrategy,
	Button,
	FieldSet,
	FieldUtils,
	ValidateOption,
	FormInputField,
} from 'zent';

function App() {
	const form = Form.useForm(FormStrategy.View);

	useEffect(() => {
		const field1 = form.model.get('field1');
		const field2 = form.model.get('field2');
		const $ = field1.value$.subscribe(value => {
			field2.value = value;
		});
		return () => $.unsubscribe();
	}, [form]);

	return (
		<Form form={form} layout="horizontal">
			<FormInputField name="field1" label="field1" />
			<FormInputField name="field2" label="field2" />
		</Form>
	);
}

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

<style>
	.form-demo-12-radio-group {
		display: flex;
		flex-direction: column;

		.zent-radio-wrap {
			display: flex;
			height: 30px;
			align-items: center;

			span:nth-child(2) {
				display: flex;
				align-items: center;
			}

			.zent-input-wrapper {
				margin: 0 10px;
			}
		}
	}
</style>