typescript 如何让用户在React JS中通过按钮输入数字并增加数字

0s0u357o 于 2023-02-25 发布在 TypeScript

关注(0)|答案(3)|浏览(197)

我想让用户输入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;

typescript

来源：https://stackoverflow.com/questions/61530157/how-to-let-the-user-input-number-and-increase-it-with-a-button-in-react-js

3条答案

按热度按时间

up9lanfz1#

您需要将event.target.value转换为数字，然后再将其保存在状态中，否则它只是保存为字符串

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

此外，将输入值字段替换为value={Number(this.state.clicks).toString()}，以便它不会一直显示前导0

**一个

赞(0）回复(0）举报 2023-02-25

8hhllhi22#

另一个答案没有考虑最小值和最大值。下面是我的方法（我将其用于RSVP表单，因此使用了guest常量）

import React, { useState } from 'react'

export default function RSVP() {
  const [count, setCount] = useState(1)
  const maxGuests = 10
  const minGuests = 1

  const handleCount = (e) => {
    if (e > maxGuests) {
      setCount(maxGuests)
    } else if (e < minGuests) {
      setCount(minGuests)
    } else setCount(e)
  }

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

  const incrementCount = () => {
    if (count < maxGuests) setCount(count + 1)
    else if (count > maxGuests) setCount(maxGuests)
  }

  return (
    <form>
      <div className='flex gap-3 py-4 my-3'>
        <input
          type='button'
          onClick={() => decrementCount()}
          value='-'
          className='cursor-pointer'
        />
        <input
          required
          type='number'
          name='counter'
          value={count}
          onChange={(event) => {
            handleCount(event.target.value)
          }}
        />
        <input
          type='button'
          onClick={() => incrementCount()}
          value='+'
          className='cursor-pointer'
        />
      </div>
    </form>
  )
}

赞(0）回复(0）举报 2023-02-25

wnvonmuf3#

如果对某些人有帮助，这里有一个使用function components的例子。

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) => {
            const value = Number(event.target.value);
            setCount(value);
          }}
        />
      )}
    </div>
  );
}

赞(0）回复(0）举报 2023-02-25

我来回答

typescript 如何让用户在React JS中通过按钮输入数字并增加数字

3条答案

相关问题

热门标签

最新问答