如何验证 ReactJS 中的数字输入答案

【问题标题】：How to validate numeric inputs in ReactJS如何验证 ReactJS 中的数字输入
【发布时间】：2019-12-06 17:26:34
【问题描述】：

在 Django 中，您可以轻松地使用 MinValueValidator 和 MaxValueValidator 来验证 IntergerFields。
它们在 ReactJS 中的对应物是什么？

我在前端有一个表单（使用 ReactJS 构建），其中多个字段是 type=number 字段，并且数字需要适合特定的值范围，即大于 0，小于 250。

在后端，我通过使用 Min/Max ValueValidator 实现了对数字输入的控制。我应该在 ReactJS 前端做什么？

谢谢！

【问题讨论】：

如果你使用 redux-form，它会验证你的表单字段redux-form.com/7.4.2/examples/syncvalidation。如果你不使用 redux-form，你必须有一个 onChange 处理程序来检查值是否在范围内。如果无效，您可以设置状态表单无效并禁用提交事件
如果你在应用中使用 redux，我认为你应该尝试 redux-form
谢谢，我也去看看redux-form！

标签： reactjs validation

【解决方案1】：

您仍然可以为input 使用min 和max 属性，但有一些自定义逻辑来检查input 的值不会超出该间隔。

示例

class App extends React.Component {
  state = { value: 0 };

  handleChange = event => {
    let { value, min, max } = event.target;
    value = Math.max(Number(min), Math.min(Number(max), Number(value)));

    this.setState({ value });
  };

  render() {
    return (
      <input
        value={this.state.value}
        onChange={this.handleChange}
        type="number"
        min="1"
        max="250"
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

【讨论】：

如果我需要一个带小数位的字段呢？这样的货币领域？我为此苦苦挣扎了几个小时，但找不到解决方案。
值不一定是int