当前位置：首页 > article >正文

antd，Form，范围选择

article 2025/3/5 1:56:27

标题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' }}>
        <InputNumber
          value={min}
          onChange={(val) => onChange([val, max])}   //onChange 触发 Form 更新数据
          placeholder="最小金额"
          style={{ flex: 1 }}
        />
        <span style={{ margin: '0 8px' }}>～</span>
        <InputNumber
          value={max}
          onChange={(val) => onChange([min, val])}   //onChange 触发 Form 更新数据
          placeholder="最大金额"
          style={{ flex: 1 }}
        />
      </div>
    );
  };


<Form
              form={form}
              style={{
                width: '100%',
                alignItems: 'flex-end',
                justifyContent: 'flex-start',
              }}
              layout={'inline'}
              name="basic"
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
         <Form.Item
                layout={'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>

在这里插入图片描述