從輸入中獲取數字時，反應計數器不會增加

Question

當從輸入中獲取數字時，React 計數器“+”和“-”按鈕不會遞增，它只是添加 1111111 但通常會遞減。 如果用戶沒有從輸入中插入數字，“+”和“-”按鈕也可以正常工作。 這是我的代碼：

 import React, { useState } from "react";
import { useRef } from "react";

function App() {
  var [count, setCount] = useState(0);
  function handleClick() {
    setCount(inputRef.current.value);
  }

  function decrease() {
    setCount(count - 1);
  }
  function increase() {
    setCount(count + 1);
  }
  const inputRef = useRef(null);

  
  return (
    <div className="container">
      <input ref={inputRef} type="text" id="message" name="message"></input>
      <button onClick={handleClick}>Enter</button>
      <h1>{count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>

    </div>
  );
}
export default App;

Answer 1

這是因為inputRef.current.value是一個字符串，這意味着+將是字符串和數字之間的連接操作。 因此，JavaScript 將在decrease()和increase()函數中將數字轉換為字符串，從而產生 output，如111..

要解決此問題，請將輸入值轉換為數字：

var [count, setCount] = useState(0);
function handleClick() {
  setCount(+inputRef.current.value);
}

注意+運算符，這會將輸入值轉換為數字。 如果要解析為 integer 或浮點數，可能需要分別使用parseInt(inputRef.current.value)或parseFloat(inputRef.current.value) 。

Answer 2

像這樣做：

function handleClick() {
 setCount(parseInt(inputRef.current.value));
}

Answer 3

輸入的是string類型，需要解析成integer。

試試這樣：

 function App() { var [count, setCount] = React.useState(0); function handleClick() { setCount(parseInt(inputRef.current.value)); } function decrease() { setCount(count - 1); } function increase() { setCount(count + 1); } const inputRef = React.useRef(null); return ( <div className="container"> <input ref={inputRef} type="text" id="message" name="message"></input> <button onClick={handleClick}>Enter</button> <h1>{count}</h1> <button onClick={decrease}>-</button> <button onClick={increase}>+</button> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

Answer 4

input的值是一個字符串。 嘗試將其轉換為數字

function handleClick() {
    setCount(Number(inputRef.current.value));
  }