如何同时通过输入和按钮更改值

Question

我有一个接受数字的输入字段，我想通过键盘输入和按钮来更改值。

只要我不使用键盘输入，这些按钮就可以正常工作。 例如，如果我输入 10 并使用按钮添加 1，则值会更改为 101 而不是我预期的 11。 另一方面，当我使用按钮减少值时，它再次正常工作。

我怎样才能让它正常工作？ 我会很感激你的帮助...

const [maxAmount, setMaxAmount] = useState(0);

const decrementMaxAmount = () => {
    if (maxAmount > 0) setMaxAmount(maxAmount - 1);
  };

const incrementMaxAmount = () => {
    setMaxAmount(maxAmount + 1);
  };

<button onClick={() => decrementMaxAmount()}>
<button onClick={() => incrementMaxAmount()}>

<input
 type="number"
 name="maxAmount"
 value={maxAmount}
 onChange={(event) => setMaxAmount(event.target.value)}
/>

Answer 1

event.target.value返回一个字符串值，所以你需要解析它。 所以：

+event.target.value或parseInt(event.target.value)

Answer 2

event.target.value 的类型是一个字符串。 所以你的 maxAmount 是一个字符串： maxAmount + 1 === "10" + 1 === "101" 。

为避免这种情况，您可以使用 Number() 构造函数转换您的类型： setMaxAmount(Number(event.target.value))

Answer 3

发生这种情况是因为event.target.value是字符串'10'并且在 JavaScript '10' + 1 = '101'中。 要获得预期结果，您应该在分配之前将event.target.value转换为 integer。

onChange={(event) => setMaxAmount(parseInt(event.target.value))}

type=“number”只告诉浏览器如何显示输入字段，而不是如何存储值。