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

如何将其作为反应组件？

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

React Component上下投票

1 个答案: