Javascript 正在更新React表单中的输入类型编号

我正在尝试更新输入值。它运行良好，正在更新其价值。然而，有一个问题，当它更新它的值时，它正在从数字转换为字符串。我已经试过使用Number，parseInt，但不起作用。它总是转换为字符串

import React from 'react';
import useForm from '../lib/useForm';

const CreateProduct = () => {
  const { input, handleChange } = useForm({
    name: 'mama',
    price: 0,
  });
  return (
    <form>
      <label htmlFor="price">
        Price
        <input
          type="number"
          id="price"
          name="price"
          placeholder="Price"
          value={parseInt(input.price)}
          onChange={handleChange}
        />
      </label>
    </form>
  );
};

export default CreateProduct;

这是初始状态：

这是更新状态，编号为gotcha

问题 输入只处理字符串。如果希望值不是任何值，则应在传递给处理程序或处理程序本身时对其进行转换

解决方案 在处理程序中处理时，将值转换回数字

function handleChange(event) {
  const { name, type, value } = event.target;

  setInput(input => {
    const nextInput = {...input}

    switch(type) {
      case 'number':
        nextInput[name] = Number(value);
        break;

      // handle other input type cases

      default:
        nextInput[name] = value;
    }
    return nextInput;
  });
}

---

检查

名称

的类型是否为

编号

。当它是数字时，将其解析为

number

type以防止它转换为

string

。如果没有，只需按照最初传入的内容更新输入

setInput({
      ...input,
      [name]: typeof name === 'number' ? Number(value) : value,
});

---

你试过那样改变吗

   setInput({
      ...input,
      [name]: name === "price" ? parseInt(value) : value,
});

---

如果传入的输入是

name

而不是

price

？@tsecheukfung01啊，捕捉得好。猜测OP需要分别处理数字字段。这是工作，但是，有更多的输入字段，如字符串，然后问题出现了，``@MamunurRashid您完全正确。我修改了我的解决方案，使用“reducer”类型模式来检查输入的

type

属性，并相应地处理状态更新。很抱歉最初误解了您的全部问题。输入并不是唯一的字符串，还有更多类似字符串的输入，然后NaN是一个问题并更新了答案。顺便说一句，只需在下面的答案中看到您的评论。创建产品时，可以进行一些检查。虽然这段代码可以为这个问题提供一个解决方案，但最好添加上下文来说明它为什么/如何工作。这可以帮助未来的用户学习并最终将这些知识应用到他们自己的代码中。当解释代码时，用户也可能会给予正面反馈/赞成票。@AmitVerma很好，更新了答案如果没有输入，则再次出现NaN问题

   setInput({
      ...input,
      [name]: name === "price" ? parseInt(value) : value,
});