React counter does not increment when taking the number from an input-CodePudding

React counter the " " and "-" buttons does not increment when taking the number from an input it just adds 1111111 but decrement normally. also the " " and "-" buttons work normally if user didn't insert number from input. here is my code :

 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;

CodePudding user response：

The value from input is a string. Try converting it to number

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

CodePudding user response：

This is because inputRef.current.value is a string and this means will be a concatenation operation between a string and a number. JavaScript will therefore cast the number to string in decrease() and increase() functions, thus resulting in an output like 111...

To fix this, please cast the input value to a number:

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

Notice the operator, this will convert the input value to a number. If you want to parse to an integer or a float, you may want to use parseInt(inputRef.current.value) or parseFloat(inputRef.current.value) respectively.

CodePudding user response：

Do it like this:

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

CodePudding user response：

What you type in the input is type of string, so you need to parse it to an integer.

Try like this:

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>