React Component Abstimmung nach oben und unten

Question

Ich muss eine Reaktionskomponente mit einem Eingang und 2 Tasten erstellen.

Wenn der Eingang mit einer definierten Anzahl beginnt in es 25

Let sagt, dass ich eine Taste, die die Zählung macht -1 und eine andere Taste, die die Zählung +1 macht. Diese

ist, wo ich bin:

import React from 'react'; 

export class VoteUpDown extends React.Component { 

    render() { 
    return (
     <div> 
     <input value="25" /> 
     <button className="countUp">UP</button> 
     <button className="countDown">DOWN</button> 
     </div> 
    ); 
    } 
} 

Wie kann ich dies als eine Komponente reagieren?

Answer 1

Angenommen, Sie keine Serialisierung der Stimmen benötigen, und Sie wollen einfach nur eine Komponente, die von dort aus bei 0 und Inkremente/Dekremente beginnt, hier ist ein einfaches Beispiel:

import React from 'react'; 

export class VoteUpDown extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     score: 0, 
    }; 

    this.increment = this.increment.bind(this); 
    this.decrement = this.decrement.bind(this); 
    } 

    render() { 
    return (
     <div> 
     <div>{this.state.score}</div> 
     <button className="countUp" onClick={this.increment}>UP</button> 
     <button className="countDown" onClick={this.decrement}>DOWN</button> 
     </div> 
    ); 
    } 

    increment() { 
    this.setState({ 
     score: this.state.score + 1, 
    }); 
    } 

    decrement() { 
    this.setState({ 
     score: this.state.score - 1, 
    }); 
    } 
}