javascript - React 组件投票向上和向下

Question

我需要创建一个带有输入和 2 个按钮的 React 组件。

输入以定义的数字开头，其中表示 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>
    );
  }
}

我如何作为 react 组件来做到这一点？

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