时间戳

首页 > 解决方案 > 整数/十进制用户输入：如何序列化/存储值

javascript - 整数/十进制用户输入：如何序列化/存储值

问题描述

我们的堆栈目前是：React SPA/Apollo/GraphQL/Rails/PostgreSQL。

我们有一个带有数字输入的 Web 表单，可能（或不）用于输入十进制值（动态/用户创建的表单）。

我们希望表单宽松（它具有自动保存功能）。如果用户键入,3或17,，则将其视为有效数字值。但不要太宽松，数字应该可以解析为浮点数并能够显示在图表中......

此外，当用户再次访问表单时，我们要确保使用他最初键入的完全相同的值初始化数字输入（我的意思是，,3不会变得神奇0,3）

对于我们的堆栈，我想知道如何在不丢失初始用户输入值的情况下序列化（作为 GraphQL 有效负载发送）和存储（在 PostgreSQL 中）和操作（在 JS/Ruby 中）这样的数字。

我认为发送/存储字符串会更简单，只要验证它可以被解析。

只是想知道是否有“正确”的解决方案，例如使用数字库、自定义 GraphQL 标量类型、十进制 SQL 类型……这对我来说似乎很复杂，以前有人做过类似的事情吗？

标签： javascriptrubypostgresqlgraphqlapollo

解决方案

您应该将输入类型选择为“文本”而不​​是数字，这样您就可以为输入创建特定格式。首先，将属性添加到您的状态

state={amount:""}

表格中金额的输入部分应如下所示：

<input
            type="text"
            placeholder="Amount"
            value={this.state.amount}
            onChange={this.onAmountChange}
          />



onAmountChange = e => {
    const amount = e.target.value;
    if (!amount || amount.match(/^-?[0-9]\d*(\.\d{0,2})?$/)) {
      this.setState(() => ({ amount }));
    }
  };

上面函数中的正则表达式表示以任何带有可选 - 的数字开头，并且可以选择以 2 个十进制数字结尾。你可以为你的表格改变它。

如果您的表单是价格，您只想添加正数，您可以使用这个正则表达式：

amount.match(/^\d{1,}(\.\d{0,2})?$/)

推荐阅读