zent/src/form/demos/13.interact.md

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

---
order: 13
zh-CN:
  title: 字段交互
	noLimit: 不限制
	limit: 限制
	count: 次
	message: 次数限制不能为0
	submit: 提交
en-US:
	title: Fields interact
	noLimit: Not limited
	limit: Limit 
	count: times.
	message: Count limit should not be zero
	submit: Submit
---

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

function sectionValidator(values) {
	if (values.option !== 'no-limit' && values.count <= 0) {
		return {
			name: 'error',
			message: '{i18n.message}',
		};
	}
	return null;
}

function getValue(e) {
	return e.target.value;
}

function Limit() {
	const option = Form.useField('option', 'no-limit');
	const count = Form.useField('count', 0);
	const onOptionChange = FieldUtils.useMulti(
		useCallback(() => (option.isTouched = true), [option]),
		FieldUtils.usePipe(
			getValue,
			FieldUtils.useChangeHandler(option, Form.ValidateOption.Default)
		)
	);
	const onLimitChange = FieldUtils.useChangeHandler(
		count,
		Form.ValidateOption.Default
	);
	return (
		<Radio.Group
			className="form-demo-12-radio-group"
			value={option.value}
			onChange={onOptionChange}
		>
			<Radio value="no-limit">{i18n.noLimit}</Radio>
			<Radio value="limit">
				{i18n.limit}
				<NumberInput
					{...FieldUtils.useCompositionHandler(count)}
					disabled={option.value === 'no-limit'}
					value={count.value}
					onChange={onLimitChange}
					onBlur={useCallback(() => {
						count.isTouched = true;
						count.validate();
					}, [count])}
				/>
				{i18n.count}
			</Radio>
		</Radio.Group>
	);
}

function App() {
	const form = Form.useForm(FormStrategy.View);
	const onSubmit = useCallback(() => {
		console.log('onSubmit');
		return Promise.resolve();
	}, []);
	return (
		<Form form={form} layout="vertical" onSubmit={onSubmit}>
			<FieldSet name="values" validators={[sectionValidator]}>
				<Limit />
			</FieldSet>
			<div>
				<Button htmlType="submit" style={{ marginTop: 16 }}>
					{i18n.submit}
				</Button>
			</div>
		</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>