在 Nextjs 中处理表单

Question

在这个代码示例中，我想尝试做简单的数学运算 (ket=name + names)。 总和应该是一个数字并显示为“ket”。 但是当我在输入字段中输入 3 和 6 时，“ket”显示为 36（而不是 9）。

export default function Kettenl() {
  const submitContact = async (event) => {
    event.preventDefault();
    const names = event.target.names.value;
    const name = 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="name" 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>
  );
}

Answer 1

那是因为值被读取为字符串 '3'+'6'='36' 你应该把它改成这个

const names = parseInt(event.target.names.value);
const name = parseInt(event.target.name.value);

此外，您正在错误地存储和访问这些值。 在继续学习 next.js 之前，您应该学习 React 的基础知识。 https://reactjs.org/docs/forms.html从文档中阅读有关受控和不受控输入的信息 因此，即使您的应用程序适用于上述更改，您也不应该这样做。

Answer 2

那是因为默认情况下，值是作为字符串从目标元素返回的。 对于type="number"的输入，您可以将输入值与e.target.names.valueAsNumber一起使用。

const submitContact = async (event) => {
    event.preventDefault();
    const names = event.target.names.valueAsNumber;
    const name = event.target.name.valueAsNumber;
    let ket = name + names;
    alert(`So your name is ${ket}?`);
  };