React組件上下投票

Question

我需要創建一個具有輸入和2個按鈕的反應組件。

當輸入與定義的數量開始以它說25

讓我有一個按鈕，這使得數-1和另一個按鈕，這使得計數+1。

這是我在哪裏：

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

我怎樣才能做到這一點的反應成分？

Answer 1

假設你不需要票的任何系列化，只是想和你說從0開始，增量/從那裏遞減的組成部分，這裏有一個簡單的例子：

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