reactjs - 有没有办法在提交时规范化 Ant 设计输入的值？

Question

我将 Ant Design 与 React JS 结合使用，并使用 Form.Item 规范化属性来解析来自 api 的输入值。

我现在想做相反的事情，在提交时将输入规范化为 api 格式。

例如:我有一个名为现金的输入，它接收一个 float 并标准化为货币，但在提交表单上我想再次接收 float 的值，这可能吗？我在 github 问题中搜索但没有找到任何相关内容。

<Form onSubmit={values => send(values)}> // I'd like retrieve values.cash in float without parse directly every time
  <Input normalize={normalize_to_currency} name="cash" />
</Form>

PS:我使用的是非受控的 Ant 设计形式。

Answer 1

您可以使用 Form.Item 规范化 Prop

<Form onFinish={values => console.log(values)}>
    <Form.Item name="currecny" normalize={e => parseFloat(e)}>
      <Input placeholder="Currency" type="number" />
    </Form.Item>
    <Button htmlType="submit">Submit</Button>
</Form>

你可以检查这个沙箱https://codesandbox.io/s/cranky-resonance-mtkxi

如果您在 getFieldDecoder 中使用 Ant Design 3.x，您将获得 normalize Prop