Next.js表单处理问题：数字输入相加出现字符串拼接错误

问题根源很明确：哪怕你把input的type设成了number，通过event.target.value获取到的值依然是字符串类型，所以直接用+运算符时，会执行字符串拼接而不是数值相加。

给你三种简单的解决方式，任选其一就行：

方法1：用Number()显式转换类型 #

把获取输入值的代码改成：

const names = Number(event.target.names.value);
const name = Number(event.target.name.value);
let ket = name + names;

方法2：用parseInt()或parseFloat()转换 #

如果确定输入是整数，用parseInt()；如果可能有小数，用parseFloat()：

const names = parseInt(event.target.names.value, 10); // 第二个参数10指定十进制，避免进制歧义
const name = parseInt(event.target.name.value, 10);
let ket = name + names;

方法3：用+做隐式转换 #

在获取的值前面加个+，快速把字符串转成数值：

const names = +event.target.names.value;
const name = +event.target.name.value;
let ket = name + names;

修改后的完整代码示例 #

还顺便修正了一个小问题：第二个label的htmlFor属性原来写错成name，现在改成names，点击标签时能正确对应到第二个输入框

export default function Kettenl() {
  const submitContact = async (event) => {
    event.preventDefault();
    // 这里用Number()做转换，选你喜欢的方法就行
    const names = Number(event.target.names.value);
    const name = Number(event.target.name.value);
    let ket = name + names;
    alert(`So your name is ${ket}?`);
  };

  return (
    <div className="max-w-xs my-2 overflow-hidden rounded shadow-lg">
      <div className="px-6 py-4">
        <div className="mb-2 text-xl font-bold">Contact us</div>
        <form className="flex flex-col" onSubmit={submitContact}>
          <label htmlFor="name" className="mb-2 italic">
            Name
          </label>
          <input
            className="mb-4 border-b-2"
            id="name"
            name="name"
            type="number"
            required
          />
          <label htmlFor="names" className="mb-2 italic">
            Names
          </label>
          <input
            className="mb-4 border-b-2"
            id="names"
            name="names"
            type="number"
            required
          />
          <button
            type="submit"
            className="px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Kojo88