javascript - Addition of two numbers in reactjs - Stack Overflow

admin管理员组

文章数量:1361787

I have two input boxes to take user input as numbers and want to display their addtion as a result in span but they are not added they are appended.

          This is my reactjs that i have tried:

              class EssayForm extends React.Component {
                 constructor(props) {
               super(props);
                          this.state = {
                value:'',
                 fno:'',
               sno:'',
         };
            this.handleSquareChange = this.handleSquareChange.bind(this);

           this.handleTextChange = this.handleTextChange.bind(this);

         this.handleTextLastChange = this.handleTextLastChange.bind(this);

              this.handleSubmit = this.handleSubmit.bind(this);
              }

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

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

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

           handleSubmit(event) {
           event.preventDefault();
               alert("wele");
           }

                      render() { 
              return (
               <div className="example">
                   <form onSubmit={this.handleSubmit}>
                   <span>Square of:</span>
                   <input type="text" value={this.state.value} onChange= 
             {this.handleSquareChange} />
                <span>First no:</span>
              <input type="text" value={this.state.fno} onChange= 
       {this.handleTextChange} />
         <span>second no:</span>
          <input type="text" value={this.state.sno} onChange= 
          {this.handleTextLastChange} />
      <input type="submit" value="Submit" onClick={this.handleSubmit} />
               </form>
            <div className="preview">
                <h1>Square of no is</h1>
              <div>{this.state.value * this.state.value}</div>
                </div>

             <div className="preview">
           <h1>Result of no is</h1>
            <div>{this.state.fno + this.state.sno}</div>
                      </div>
                </div>
              );
            }
       } 

           ReactDOM.render(<EssayForm />, document.getElementById('app'));

I have taken a input box to square a number it works fine but not addition.Anybody can let me know where i am wrong.I am new to reactjs.

I have two input boxes to take user input as numbers and want to display their addtion as a result in span but they are not added they are appended.

          This is my reactjs that i have tried:

              class EssayForm extends React.Component {
                 constructor(props) {
               super(props);
                          this.state = {
                value:'',
                 fno:'',
               sno:'',
         };
            this.handleSquareChange = this.handleSquareChange.bind(this);

           this.handleTextChange = this.handleTextChange.bind(this);

         this.handleTextLastChange = this.handleTextLastChange.bind(this);

              this.handleSubmit = this.handleSubmit.bind(this);
              }

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

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

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

           handleSubmit(event) {
           event.preventDefault();
               alert("wele");
           }

                      render() { 
              return (
               <div className="example">
                   <form onSubmit={this.handleSubmit}>
                   <span>Square of:</span>
                   <input type="text" value={this.state.value} onChange= 
             {this.handleSquareChange} />
                <span>First no:</span>
              <input type="text" value={this.state.fno} onChange= 
       {this.handleTextChange} />
         <span>second no:</span>
          <input type="text" value={this.state.sno} onChange= 
          {this.handleTextLastChange} />
      <input type="submit" value="Submit" onClick={this.handleSubmit} />
               </form>
            <div className="preview">
                <h1>Square of no is</h1>
              <div>{this.state.value * this.state.value}</div>
                </div>

             <div className="preview">
           <h1>Result of no is</h1>
            <div>{this.state.fno + this.state.sno}</div>
                      </div>
                </div>
              );
            }
       } 

           ReactDOM.render(<EssayForm />, document.getElementById('app'));

I have taken a input box to square a number it works fine but not addition.Anybody can let me know where i am wrong.I am new to reactjs.

• javascript
• html
• reactjs

Share Improve this question Follow asked Aug 8, 2019 at 8:37 sourav sahusourav sahu 2311 gold badge11 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

In your state you have defined sno and fno as string. Therefore when you set anything to them they make the value as string. What you can do is make sno and fno filed as number by giving them the default value of 0. Or, you can typecast them to number before adding. Like, (Number)this.state.fno + (Number)this.state.sno.

handleTextChange(event) {
      this.setState({fno: Number(event.target.value)});
}

handleTextLastChange(event) {
      this.setState({sno: Number(event.target.value)});
}

just replace the functions.Hope this will solve your problem

This is code for you;

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        value:'',
        fno:'',
        sno:'',
      };

      this.handleChange = this.handleChange(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;

    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault();
    alert("wele");
  }

  render() { 
    const { fno, sno, value } = this.state;

    return (
      <div className="example">
        <form onSubmit={this.handleSubmit}>
          <span>Square of:</span>
          <input 
            type="text" 
            name="value"
            value={value} 
            onChange={this.handleChange} 
          />
          <span>First no:</span>
          <input 
            name="fno"
            type="text"
            value={fno}
            onChange={this.handleChange} 
          />
          <span>second no:</span>
          <input 
            type="text" 
            name="sno"
            value={sno} 
            onChange={this.handleChange}
          />
          <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>
        <div className="preview">
          <h1>Square of no is</h1>
          <div>{Number(value) * Number(value)}</div>
        </div>
        <div className="preview">
          <h1>Result of no is</h1>
          <div>{Number(fno) + Number(sno)}</div>
        </div>
      </div>
    );
  }
} 

ReactDOM.render(<EssayForm />, document.getElementById('app'));

本文标签： javascriptAddition of two numbers in reactjsStack Overflow