代码之家 › 专栏 › 技术社区 › Sebastien Lorber

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

apollo graphql postgresql ruby javascript

0

Sebastien Lorber · 技术社区 · 8 年前

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

我们有一个带有数字输入的web表单,可以(或不可以)用来输入十进制值(动态/用户创建的表单)。

我们希望表单更宽松(它具有自动保存功能)。如果用户类型 ,3 或 17, ,这被视为有效的数值。但不要太宽大,这个数字应该可以被解析为一个浮点数,并且能够以图形的形式显示。。。

另外,当用户再次访问表单时,我们希望确保使用他最初键入的完全相同的值初始化输入的数字(我的意思是, ,3个 不会变魔术 0,3 )

我想知道,对于我们的堆栈,如何序列化(以GraphQL有效负载的形式发送)和存储(在PostgreSQL中)以及操作(在JS/Ruby中)这样的数字而不丢失初始用户输入值。

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

只是想知道是否有一个“正确”的解决方案,例如使用数字libs、自定义GraphQL标量类型、十进制SQL类型。。。我觉得很复杂,以前有人做过类似的事吗?

1 回复 | 直到 8 年前

1

Oleksandr Bondar 8 年前

创建两个字段。一个用于用户输入,另一个用于解析值。我认为这对任何堆栈都不会有什么不同。

挑战在于如何向用户展示您对输入值的理解。这可以通过在文本字段下带有解析值的提示来解决。

2

1

Yilmaz 7 年前

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

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 }));
    }
  };

上面函数中的regexp表示以任意数字开头,可选地,u可以以2个十进制数字结尾。你可以把它改成你的表格。

如果您只想添加正数(如果您的表单是价格表),则可以使用此regexp:

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