Ant Design中自定义表单控件实现与理解

Ant Design中自定义表单控件实现与理解

控制Form表单项name对应字段的值的变化（onchange）和展示（value）

1. onchange()中写入你从组件中获取，传给form的值。
2. value中是form中对应的name传给你的值。

以Ant Design中的示例为参考
其中主体代码如下：

 <Form
      name="customized_form_controls"
      layout="inline"
      onFinish={onFinish}
      initialValues={{
        price: {
          number: 0,
          currency: "rmb",
        },
      }}
    >
      <Form.Item name="price" label="Price" rules={[{ validator: checkPrice }]}>
      	//将input和下拉框封装成一个组件
        <PriceInput />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>

PriceInput 组件代码如下：

const PriceInput: React.FC<PriceInputProps> = ({ value = {}, onChange }) => {
  const [number, setNumber] = useState(0);
  const [currency, setCurrency] = useState<Currency>("rmb");

  const triggerChange = (changedValue: {
    number?: number;
    currency?: Currency;
  }) => {
  	//将input和select获取的值传入
    onChange?.({ number, currency, ...value, ...changedValue });
  };
  // 输入框值变化函数
  const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newNumber = parseInt(e.target.value || "0", 10);
    if (Number.isNaN(number)) {
      return;
    }
    if (!("number" in value)) {
      setNumber(newNumber);
    }
    triggerChange({ number: newNumber });
  };
  
  // 下拉框值变化函数
  const onCurrencyChange = (newCurrency: Currency) => {
    if (!("currency" in value)) {
      setCurrency(newCurrency);
    }
    triggerChange({ currency: newCurrency });
  };

  return (
    <span>
      <Input
        type="text"
        value={value.number || number}
        onChange={onNumberChange}
        style={{ width: 100 }}
      />
      <Select
        value={value.currency || currency}
        style={{ width: 80, margin: "0 8px" }}
        onChange={onCurrencyChange}
      >
        <Option value="rmb">RMB</Option>
        <Option value="dollar">Dollar</Option>
      </Select>
    </span>
  );
};

结果展示如下：