0
votes

Ajout de deux nombres dans ReactJS

J'ai deux boîtes d'entrée pour prendre l'entrée de l'utilisateur en tant que nombres et souhaiter afficher leur addition en conséquence, elles ne sont pas ajoutées, elles sont annexées.

          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("welcome");
           }

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

javascript reactjs html

0 commentaires

3 Réponses :

1
votes

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

0 commentaires

2
votes

Dans votre état, vous avez défini SNO et FNO en tant que chaîne. Par conséquent, lorsque vous leur définissez quelque chose, ils font la valeur en tant que chaîne. Ce que vous pouvez faire est de rendre SNO et FNO déposé sous le numéro en leur donnant la valeur par défaut de 0. ou, vous pouvez les typoser au numéro avant d'ajouter. Comme, (nombre) ceci.state.fno + (numéro) this.state.sno.

0 commentaires

0
votes

Ceci est code pour vous;

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("welcome");
  }

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

0 commentaires