Question

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

我的根组件

class App extends Component{

 state ={
  data:0
  };

render() {

  return (

   <div className="App">

     <div id="inside">
      <Increment change={this.changeHandler} value={this.state.data} number={this.state.data}
       incrementHandler={this.incrementHandler} decrementHandler={this.decrementHandler}
      />

      <br></br>

      </div>
      <br />

    </div>
  );

}
}
export default App;

我的增量功能

IncrementHandler是单击按钮后执行的功能

  incrementHandler =()=>{

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

    this.setState(state =>({
      data: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;

在单击增量按钮时，必须将更新后的状态值设置为递增，但要追加。

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

Answer 1

您的输入为文本类型。因此，当您递增时，字符串值将被隐藏。 '1'+ 1是11而不是2。

将输入更改为

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

或使用parseInt方法。（但为此您必须确保输入值始终为数字）

Answer 2

 incrementHandler =()=>{

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

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


};

Answer 3

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);

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

3 个答案: