如何在 ReactJS 中验证数字输入

Question

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

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

在后端，我实现了这种控制使用 Min/Max ValueValidator 覆盖数字输入。我应该在 ReactJS 前端做什么？

谢谢！

Answer 1

您仍然可以将min和max属性用于input，但有一些自定义逻辑来检查该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>