Reactjs 使用另一个函数中的更新状态作为参数

我有一个输入字段，当我在输入字段中输入任何值时，我用输入的值更新状态。然后我想在一个函数中使用更新后的状态值，该函数增加这个更新后的状态值

我的根组件

我的changehandler函数

我正在根组件中导入的文件

单击增量按钮时，更新的状态值必须为 递增，但正在追加

---

示例：如果我在输入字段中输入124，单击增量按钮后，该值应为125，但为我显示的值为1241

您的输入类型为文本。因此，当您递增时，字符串值是concated的。 “1”+1是11而不是2

将您的输入更改为

<input type="number" onChange={props.change} value={props.value}/>

---

或者使用parseInt方法。但为此，您必须确保输入值始终为number

如果解决了您的问题，请接受anser。谢谢

 incrementHandler =()=>{

    // getting the previous value in the state using prevState keyword

    this.setState(state =>({
      data:parseInt(this.state.data)+1
     }));


};

changeHandler =(event)=>{

      this.setState({data:event.target.value});

    };

  //Function contains input field
 const Increment =(props)=>{

     return(

         <div className="count">

         <input type="text" onChange={props.change} value={props.value}/>

         <h1 >Count:{props.number} </h1>

         <br></br>

         <br></br>

         <button onClick={props.incrementHandler} type="button" 
          className="btn btn-success" id ="btn">Increment </button>

          <button onClick={props.decrementHandler} type="button" 
           className="btn btn-warning" id="btn">Decrement </button>
         </div>

        )

    };

    export default Increment;

<input type="number" onChange={props.change} value={props.value}/>

 incrementHandler =()=>{

    // getting the previous value in the state using prevState keyword

    this.setState(state =>({
      data:parseInt(this.state.data)+1
     }));


};

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
function App() {
  const [num, setnum] = React.useState(0);

  const increment = () => {
    setnum(parseFloat(num) + 1);
  };
  const decrement = () => {
    setnum(num - 1);
  };
  return (
    <div>
      <input type="number" value={num} onChange={e => setnum(e.target.value)} />
      <button onClick={increment}>inc</button>
      <button onClick={decrement}>dec</button>
      <p>{num}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);