Je suis un noob dans react.js et j'essaie d'apprendre l'état et de définir l'état en écrivant une simple addition ap. Im essayant d'obtenir les 2 valeurs des entrées en utilisant l'état mais je n'obtiens rien lorsque je clique sur le bouton Ajouter pour une raison quelconque. Quelqu'un peut-il s'il vous plaît expliquer comment je peux ajouter les 2 valeurs et ce que je fais de mal? Merci !

import React from 'react'; 
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };

       this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }


  handlenum1Change (evt) {
    this.setState({ num1: evt.target.value });
  }





handlenum2Change(evt) {

    this.setState({ num2: evt.target.value });


}


   addAction (event) {

  var num1=this.setState({ num1: event.target.value });
  var num2=this.setState({ num2: event.target.value });



   this.setState({result: num1 + num2 })

            } 


  render() {


     return (


      <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
           <input type="number" ref="term" placeholder="Length of loan"  onChange={this.handlenum2Change}/>


            <input type="button" onClick={this.addAction} value="Add"/>
    <input type='text' value={this.state.result} readonly/>

        </label>

      </form>
    );
  }
}




export default Grade;
0
Logitech 23 mai 2018 à 06:26

5 réponses

Meilleure réponse

Vous n'avez pas lié la fonction addAction à this. Vous devez donc l'ajouter avec this.handlenum1Change = this.handlenum1Change.bind(this);. Vous pouvez également le faire avec les fonctions fléchées. Pour calculer les valeurs à l'intérieur de addAction, vous pouvez accéder à l'état en faisant var num1 = this.state.num1 et non var num2=this.setState({ num2: event.target.value });. De plus, vous ne devriez pas appeler setState près de togehter. (Lisez-le en recherchant "pourquoi setState est asynchrone") En substance, votre addAction devrait ressembler à ceci:

addAction=()=>{
 this.setState({result: this.state.num1 + this.state.num2 })
}

React ne fait pas type="number" en entrée, vous pouvez trouver des solutions de contournement ici.

Donc tu dois faire quelque chose comme

handlenum1Change (evt) {
 console.log(evt.target.value);
 this.setState({ num1: Number(evt.target.value) });
}

Avec votre handlenum1Change et handlenum2Change.

Et readOnly avait O capital, le vôtre est readonly. En bref, à la fin de la journée, votre code devrait ressembler à quelque chose comme

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

class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };
    this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }
  handlenum1Change (evt) {
    console.log(evt.target.value);
    this.setState({ num1: Number(evt.target.value) });
  }
  handlenum2Change(evt) {
    console.log(typeof evt.target.value);
    this.setState({ num2: Number(evt.target.value) });
  }
  addAction =(event)=> {
    let x = this.state.num1 + this.state.num2
    this.setState({result: x })
  }
render() {
 return (
    <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
          <input type="number"   onChange={this.handlenum2Change}/>
          <input type="button" onClick={this.addAction} value="Add"/>
          <input type='text' value={this.state.result} readOnly/>
        </label>
      </form>
    );
  }
}




export default Grade;

Je vous recommande fortement de suivre quelques cours sur ReactJs.

2
illiteratewriter 23 mai 2018 à 04:27

La fonction this.setState () renvoie void.

Alors
var num1=this.setState({ num1: event.target.value }); ne peut obtenir que undefined

Si vous voulez utiliser num1

var num1=this.state.num1

Num2

var num2=this.state.num2

1
lsdoy 23 mai 2018 à 03:58
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      operator: '+',
      num1: '',
      num2: '',
      result: '0'
    };
    this.actionHandler = this.actionHandler.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this)
  }
  handleChange = (e) => {
    this.setState({ operator: e.target.value })
  }

  handleInputChange(e) {
    this.setState({
      [e.target.name]: Number(e.target.value)
    });
  }

  actionHandler = (e) => {
    e.preventDefault();
    let x = this.state.num1 + this.state.num2;
    this.setState({ result: x })
  }
  render() {
    return (
      <div className="calculate">
        <form>

          <input type="text" onChange={this.handleInputChange} name="num1" placeholder="Enter 1st Number" />
          <br />
          <br />
          <label>
            <select value={this.state.operator} onChange={this.handleChange}>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
          </label>
          <br />
          <br />
          <input type="text" onChange={this.handleInputChange} name="num2" placeholder="Enter 2nd Number" />
          <br />
          <br />

          <button onClick={this.actionHandler} type="submit" > Answer </button>
          <input type="text" value={this.state.result} readOnly />
        </form>

      </div>
    );
  }
}
1
Rahil1258 28 sept. 2018 à 12:53
function Sum(props) {
    return (
       <h1>
        {props.a} + {props.b} = {props.a + props.b}
       </h1>
    );
}

ReactDOM.render(<Sum a={4} b={2}/>,document.getElementById('root'));
0
AmerllicA 16 févr. 2020 à 07:56

Il y a beaucoup de choses à corriger dans votre code. # 1: votre action d'ajout est incorrecte. De plus, vous n'avez pas besoin de deux méthodes de changement de poignée, que faire si vous avez 10 champs? vous ne voulez pas écrire 10 méthodes de handlechange. Veuillez réviser le code ci-dessous et faites-moi savoir que cela fonctionne.

export default class AddComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            number1: 0,
            number2: 0,
            total: 0
        }
    }
    handleChange = (e) =>{
        const {name, value} = e.target;
        this.setState({
            [name]: value
        })
    }

    add = () => {
        const{number1, number2} = this.state;
        this.setState({
            total: (parseInt(number1)+parseInt(number2))
        })
    }

    render() {
        const {total} = this.state;
        return (
            <div>
                 <div>{total}</div>
                 <div>
                     <label>Number 1</label>
                     <input type="text" name="number1" onChange={this.handleChange} />
                </div>
                <div>
                     <label>Number 2</label>
                     <input type="text" name="number2" onChange={this.handleChange}/>
                </div>
                <button onClick={this.add}>Add</button>
            </div>
        );
    }
}
1
John Samuel 23 mai 2018 à 04:15