Javascript/Typescript 类号与字符串的最佳实践问题

如何解决Javascript/Typescript 类号与字符串的最佳实践问题

我是新手。我没有意识到，在我的 Typescript/React 解决方案中，即使我将属性定义为数字，并且我将输入类型设为“数字”，每当您将该状态值放入输入字段时，它就会将其更改为字符串（除非你做任何事情来处理）。

就我而言，我最初是从 xml soap 调用中插入值。此项目的内部 html 是“100.00”。我将这个项目 (Basefare) 的类声明为一个数字而不是一个字符串，并且状态最初设置为 100.00（作为一个数字）。它在表单上呈现，我进行更改的那一刻，它又变回字符串“199.00”。

我在我的部分代码中对 Basefare 进行了计算，因此我不得不对这个函数执行 parseInt 以使其处理现在的字符串。

我的问题是... 在什么时候您决定将其定义为字符串还是数字。做 parseInt 很好。但我不喜欢这个属性最初是一个数字然后变成刺痛的事实。 然后，因为我认为对于查看代码的其他人来说，他们可能认为将该属性从数字变为字符串很奇怪，如果我要将其定义为数字，那么我的 handleChange 函数肯定应该 setState作为数字，因此该值始终被视为数字。

只是想要一个一直这样做的人的意见......

处理更新输入字段中的值并将其记录为数字的最佳最现代方法是什么。我已经将 valueAsNumber 视为处理此问题的常用方法...

handleChange(e) {
    this.setState({
        [e.target.name]: e.target.valueAsNumber || e.target.value
    });
}

似乎如果它是一个真实的数字并且我需要对其进行计算，那么“正确”的方法是将其定义为数字并将其保留为数字。是吗？

解决方法

DOM 在内部将值存储为字符串，而显示给用户的是字符串。

因此，您可以选择如何处理它。在 <input type="number" /> 上，您可以找到可用于转换的 valueAsNumber，也可以自己进行转换。

我认为唯一重要的是在 EventHandler 中处理转换。

此外，为了使事情更简单，您可以使用表单库，例如 react-hook-form 将 take care of that，这样您就不必处理此类细节。 有了它，您需要做的就是：

const MyForm : FC = () =>
  const { register,watch } = useForm<{thatInput: number}>();

  const { thatInput } = watch();

  return (
    <...>
      <input type="number" name="thatInput" ref={register({valueAsNumber: true})} />
      <div>the value is: {thatInput}</div>
    </...>
  );
}

,

TypeScript 中的 number 类型支持浮动

let inputValue: number = 3.14
console.log(inputValue)   //this is valid code

那么我猜你的问题是 input type="number"

数字类型有一个 step 值控制哪些数字是有效的（以及 max 和 min），默认为 1。这个值也被步进器的实现使用按钮（即向上按递增）。

只需将此值更改为适当的值即可。对于金钱，可能需要两位小数：

<input type="number" step="0.01">

或

<input type="number" step="any">