javascript - 在 React 表单中更新输入类型号

Question

我正在尝试更新输入值。它工作正常，正在更新其值(value)。但是，有一个问题，当它更新它的值时，它正在从数字转换为字符串。我已经尝试过 号码 , 解析整数 ， 这没用。它总是转换为字符串。

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;

在自定义函数中:

import * as React from 'react';

export default function useForm(initialValue = {}) {
  const [input, setInput] = React.useState(initialValue);

  function handleChange(event) {
    const { name, value } = event.target;
    setInput({
      ...input,
      [name]: value,
    });
  }
  return {
    input,
    handleChange,
  };
}

这是初始状态:

这是带有数字 gotcha 的更新状态

Answer 1

问题
输入仅处理字符串。如果您希望该值是其他任何值，则应在传递给处理程序时或在处理程序本身中转换它。
解决方案
在处理程序中处理时将值转换回数字

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