互联网app推广_网址有哪些组成_公关公司是干嘛的_qq推广网站

标题antd，Form，范围选择

import { Form, InputNumber } from 'antd';const [form] = Form.useForm();const onFinish: any = (values: any) => {const [startAmount, endAmount] = values.amountRange || [];console.log('Success:' startAmount, endAmount);
};//自定义组件
const InputNumberRange = ({ value = [], onChange }: any) => {const [min, max] = value || [];  //`value` 由 `Form` 控制return (<div style={{ display: 'flex', alignItems: 'center' }}><InputNumbervalue={min}onChange={(val) => onChange([val, max])}   //onChange 触发 Form 更新数据placeholder="最小金额"style={{ flex: 1 }}/><span style={{ margin: '0 8px' }}>～</span><InputNumbervalue={max}onChange={(val) => onChange([min, val])}   //onChange 触发 Form 更新数据placeholder="最大金额"style={{ flex: 1 }}/></div>);};<Formform={form}style={{width: '100%',alignItems: 'flex-end',justifyContent: 'flex-start',}}layout={'inline'}name="basic"onFinish={onFinish}onFinishFailed={onFinishFailed}autoComplete="off"><Form.Itemlayout={'vertical'}label="金额"name="amountRange"><InputNumberRange /></Form.Item></Form>

原理：
Ant Design 的 Form.Item 支持自定义组件，只要这个组件遵循 受控组件（Controlled Component） 规范，就能正确绑定 Form 的值。
InputNumberRange 符合 Form.Item 的受控组件要求：value 由 Form 传入，确保组件受控

<Form.Item label="订单金额" name="amountRange"><InputNumberRange />
</Form.Item>

Form.Item 自动传递 value 和 onChange 给 InputNumberRange，InputNumberRange 处理用户输入后，调用 onChange，Form 立刻更新 amountRange 的值
等效于

<Form.Item label="订单金额" name="amountRange">{({ value, onChange }) => (<InputNumberRange value={value} onChange={onChange} />)}
</Form.Item>