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

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

在本例中，我最初是从xml soap调用插入值。此项的内部html为“100.00”。我将此项的类（基本票价）声明为数字而不是字符串，并且状态最初设置为100.00（作为数字）。它被呈现在表单上，当我进行更改时，它会变回字符串“199.00”

我在代码的一部分中对基本票价进行了计算，因此我必须对这个函数进行parseInt，以便它处理现在的字符串

我的问题是。。。 在什么时候，你决定将其定义为字符串还是数字。执行parseInt很好。但我不喜欢这样一个事实，即属性最初是一个数字，然后变为sting。 然后，因为我认为对于其他看代码的人来说，他们可能会认为将该属性从一个数字变成一个字符串是很奇怪的，如果我要将它定义为一个数字，那么我的handleChange函数肯定应该将state设置为一个数字，所以该值总是被视为一个数字

只是想听听某个人的意见，他总是这么做

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

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

---

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

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

因此，这取决于你选择如何处理它。在

上，您可以使用您找到的

值asnumber

进行转换，也可以自己进行转换

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

同样为了使事情更简单，您可以使用表单库，比如will，这样您就不必处理此类细节。 有了它，您只需做以下事情：

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

constmyform:FC=（）=>
const{register，watch}=useForm（）；
const{thatInput}=watch（）；
返回(
该值为：{thatInput}
);
}

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

因此，这取决于你选择如何处理它。在

上，您可以使用您找到的

值asnumber

进行转换，也可以自己进行转换

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

同样为了使事情更简单，您可以使用表单库，比如will，这样您就不必处理此类细节。 有了它，您只需做以下事情：

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

constmyform:FC=（）=>
const{register，watch}=useForm（）；
const{thatInput}=watch（）；
返回(
该值为：{thatInput}
);
}

类型脚本中的

数字

类型支持浮动

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

那么我猜你的问题出在

input type=“number”

数字类型有一个

步骤

值，控制哪些数字有效（以及

最大值

和

最小值

），默认值为1。该值也用于步进器按钮的实现（即，向上按一步递增）

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

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

或

---

类型脚本中的

数字

类型支持浮动

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

那么我猜你的问题出在

input type=“number”

数字类型有一个

步骤

值，控制哪些数字有效（以及

最大值

和

最小值

），默认值为1。该值也用于步进器按钮的实现（即，向上按一步递增）

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

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

或

你好，Richard，欢迎来到SO，遗憾的是，这些问题不是针对SO的，而是针对其他Stack Exchange论坛的。在这里，你应该发布一个直接的问题，可以复制和回答（大部分）代码。征求意见有时很有见地，但这不是一个论坛。我没有投反对票，因为这个问题是合法的，你做了你的研究，尽管我投票以基于意见的方式结束；）对不起，我不知道-谢谢你…别担心，我们是来帮忙的；-）你好，Richard，欢迎来到SO，遗憾的是，这些问题不是针对SO的，而是针对其他Stack Exchange论坛的。在这里，你应该发布一个直接的问题，可以复制和回答（大部分）代码。征求意见有时很有见地，但这不是一个论坛。我没有投反对票，因为这个问题是合法的，你做了你的研究，尽管我投票以基于意见的方式结束；）对不起，我不知道-谢谢你…别担心，我们是来帮忙的；-）这是一个误导性的答案。JavaScript，以及暗示的TypeScript，数字确实支持浮点，但这和错误的来源无关，而且TypeScript在这里并没有任何影响。为什么它会产生误导？问题是“在什么时候你决定将它定义为一个字符串而不是一个数字。做parseInt很好。但是我不喜欢这个属性最初是一个数字，然后变为sting”他不必将它变为字符串，我已经写了为什么以及如何实现我的理解。也许这只是一个让贝卡困惑的例子