Question

考虑以下代码：

import React, { Component } from 'react';

class Counter extends Component {
  state = { value: 5 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

如何做到这一点，以便每当我单击减量按钮时，该值都将不小于0。该值的最小值将始终为零，而不是-1，-2，-3，-4 ... < / p>

Answer 1

只需在递减代码中设置一个最小值：

y<-30

Answer 2

这就是数字输入的工作方式。为了简化代码，您可以尝试使用validity状态（如果您的目标浏览器支持的话）

onChange(e) {
    if (!e.target.validity.badInput) {
        this.setState(Number(e.target.value))
    }
}

Example

Answer 3

你可以试试

text_field(:post, :title,  maxlength: 30, class: "title_input")

在React.js中使计数器不小于零

3 个答案: