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