Как разрешить пользователю вводить номер и увеличивать его кнопкой React JS

Question

Я хочу, чтобы пользователь ввел clicks раз и увеличил его кнопкой, но я не знаю, как. Вот код.

import React, { Component } from "react";

class Click extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
      show: true,
    };
  }


  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  };

  DecreaseItem = () => {
    if (this.state.clicks < 1) {
      this.setState({
        clicks: 0,
      });
    } else {
      this.setState({
        clicks: this.state.clicks - 1,
      });
    }
  };
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  };
  handleChange(event) {
    this.setState({ clicks: event.target.value });
  }

  render() {
    return (
      <div>
        <button onClick={this.DecreaseItem}>Click to decrease by 1</button>
        <button onClick={this.IncrementItem}>Click to increase by 1</button>

        <button onClick={this.ToggleClick}>
          {this.state.show ? "Hide number" : "Show number"}
        </button>
        {this.state.show ? ( <input type="number" name="clicks" value={this.state.clicks}onChange = {this.handleChange.bind(this)}/>) : (" ")}
      </div>
    );
  }
}

export default Click;

Answer 1

Ваш компонент работает как есть, без каких-либо изменений. Если я вставлю его в Codesandbox, он будет работать.

Хотя есть некоторые возможности для очистки. Например, React отошел от компонентов класса и теперь использует функциональные компоненты почти исключительно для использования React Hooks .

Вот реорганизованная версия вашего компонент:

import React, { useState } from "react";

function Click() {
  const [count, setCount] = useState(0);
  const [isVisible, setIsVisible] = useState(true);

  const decrementCount = () => {
    if (count > 0) setCount(count - 1);
  };

  const incrementCount = () => {
    setCount(count + 1);
  };

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={decrementCount}>Click to decrease by 1</button>
      <button onClick={incrementCount}>Click to increase by 1</button>
      <button onClick={toggleVisibility}>
        {isVisible ? "Hide number" : "Show number"}
      </button>
      {isVisible && (
        <input
          type="number"
          name="clicks"
          value={count}
          onChange={(event) => {
            setCount(event.target.value);
          }}
        />
      )}
    </div>
  );
}

Answer 2

Вам необходимо преобразовать event.target.value в число перед сохранением его в состоянии, в противном случае его просто сохраняют как строку

  handleChange(event) {
    this.setState({ clicks: Number(event.target.value) });
  }

Также замените поле входного значения на value={Number(this.state.clicks).toString()}, чтобы оно не продолжить показ ведущих 0

Рабочая демоверсия